WebPageBuild

1.Install Node.js

Double-click the installation package to install.

2.Create GitHub Page

Create a new repository, the repository name should match the username. Format: name.github.io.

The “name” needs to match your username on xxx.github.com, or else you won’t be able to access name.github.io properly.

Access the repository’s Settings, go to Pages, turn on the page switch, and select the “main” branch.

3.Group Collaboration

Add team members to the repository to collaborate on project management.

4.Run Git

Install GitHub Desktop by double-clicking on the installation package.

After a successful installation, log in to your GitHub account and then pull the corresponding repository.

Edit the repository files in VScode, save your changes, and then push the modified content back to the repository.

5.Install Hexo

Enter the following in the command line:

npm install -g hexo-cli 

Initialize the Hexo project.

The Hexo project will automatically create all the necessary files for your website in the target folder. Make sure to enter the command in an empty folder:

hexo init

After a successful initialization, files will be automatically generated in the folder.

Install the dependency packages:

npm install

Locally view the Hexo service:

Generate static files:

hexo generate
or
hexo g

Start the local server:

hexo server
or
hexo s

Afterward, access http://localhost:4000 in your web browser for local preview.

6.Install the Fluid theme

Enter the Hexo directory and execute the command:

npm install --save hexo-theme-fluid

Specify the theme

Modify the configuration file to set the website theme to “fluid.”

Make the following modifications in the _config.yml file within your Hexo directory:

theme: fluid  # Specify the theme
language: en  # Specify the language, which can affect the language displayed in the theme. Modify it as needed.

After making the modifications, access local preview to see that the website theme has been successfully changed.

7.Create document pages

Create「About Page」

Enter the following command in the command line:

hexo new page about

After successfully creating it, modify /source/about/index.md and add the layout property.

Afterward, update the relevant content on the About Page, supporting Markdown and HTML.

Create a new article page

Enter the following command in the command line:

hexo new pagename

The “pagename” is the title of the new page, and the page will be automatically created.

After successfully creating it, you can find the corresponding .md document in the /source/_posts directory. Click to edit the content, supporting Markdown and HTML.

Add images to the page

Import the images into the /source/img folder.

Edit the article content and insert images.

![](/img/clock.png)

Home Page

Modify the homepage content in the _config.fluid.yml file.

Change the homepage title.

navbar:
  blog_title: "10:36 Team"

Edit the homepage typewriter text.

slogan:
  enable: true
  text: "Hello! Welcome to the page of 10:36 Team!"

Change the site favicon.

# Icon for browser tab
favicon: /img/clock1.png

# Icon for Apple touch
apple_touch_icon: /img/clock1.png

Edit the menu bar content.

menu:
    - { key: "home", link: "/", icon: "iconfont icon-home-fill"}
    - { key: "archive", link: "/archives/", icon: "iconfont icon-archive-fill" }
    - { key: "category", link: "/categories/", icon: "iconfont icon-category-fill"}
    - { key: "about", link: "/about/", icon: "iconfont icon-user-fill"}

Navigation bar menu. key is used to associate languages/*.yml. If there is no association, the value of key itself will be displayed; if icon is a css class, it can be omitted; adding name can force the display of the specified name

8.Deployment

Add deployment configuration in the _config.yml file.

deploy:
  type: git
  repo: git@github.com:mengcye/mengcye.github.io.git #GitHub repository address for deployment.
  branch: main

Before each deployment, it’s necessary to clear the existing static files, generate new static files, and then proceed with the deployment.

Execute the following commands in sequence:

#Clear the current static files.
hexo clean
or 
hexo cl

#Generate static files.
hexo generate
or
hexo g

#Deploy
hexo deploy
or 
hexo g

After a successful deployment, visit the corresponding GitHub Pages URL to view our website.

9.The final homepage display

Reference

https://blog.csdn.net/sedbz/article/details/126032526

https://hexo.fluid-dev.com/docs/start/#%E4%B8%BB%E9%A2%98%E7%AE%80%E4%BB%8B

https://blog.csdn.net/qq_36580022/article/details/127964463