November 28, 2022

Website Construction

Introduction

We used Hexo to build the site based on Github.

Hexo is a fast, clean and efficient blogging framework. Hexo uses Markdown (or other rendering engine) to parse posts and generate static pages with beautiful themes in seconds.

Configuration

1.We use a Windows-based computer to build the website. Install Git, Node.js and VScode. It is worth mentioning that if you are using a Mac OS system, you do not need to install Git.

2.Install hexo. Create a new folder to store web information and schema.Right-click and click "Git Bash Here" to start Git. Type npm i hexo-cli -g . After installation, type hexo-v to verify the installation is successful.

3.Connect Github with local. Enter the Github account name and email to generate the SSH Key.

4.Open Github and create a new SSH in your account. type cat ~/.ssh/id_rsa.pub in Git Bash and copy the output to Github; type ssh -T git@github .com in Git Bash and the username appears as successful.

5.Open the "_config.yml" file in the root directory and modify the relevant configuration. We need to find the embed code for the site from the GitHub homepage and copy it to the "_config.yml" file in the root directory. In addition, depending on the upload method and site settings, w we need to set the Type in the "_config.yml" file to git and the Branch to Main.

Design

1.We chose cupertino's web template and downloaded its source files from the official website.

2.We modified some parameters in the template file to make the web design more in line with our needs. For example, we use css syntax to define the aesthetic properties of images, code, and other elements within a web page, which can make our web pages look more complete.

3.For our website homepage, we built the basic elements such as the navigation bar. In the following figure we show the code that implements this design.

The above is the process of building and designing our group webpage. As the course progresses, we may update our design, so feel free to stay tuned.

Update

1.Open Git and type hexo new "" to create a new project file for the web page. In this string of code, the name of the page is in the middle of the quotes.

2.Write the website content in the newly created file using HTML language, and save it in time after finishing writing.

3.Open Git and type hexo clean to clear the cache.

4.Next, type hexo g to update the site information locally.

5.Finally, type hexo d to upload the updated site information locally to Github.

Other Information

Since Hexo deploys global resource folders locally, when uploading to GitHub, the resource folders are arranged chronologically in the repository as shown in the figure. Specific information can be found in this official document.