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.

Our group members play different roles based on their strengths and collaborate to complete course projects together.The composition of the team members is as follows.

For more detailed team and member introductions, please click on “About” or click on each person’s name on the “About” page to view personal information of team members, as shown bellow

4.Run Git

We use the brew command to install git. Run the following command in the command line window:

1
brew install git

After successfully installing Git, check the Git version：

Clone project files from remote repository to local location：

1
2
3
git clone https://github.com/NexMaker-Fab/2023zjude-10-36.git
cd 2023zjude-10-36.git
ls


Modify the project locally. After installing the hexo framework on the local machine, modify its configuration file (refer to the “Deployment” section for details). You can directly push the content back to the GitHub repository using the following command in hexo. Run the following command step by step in the vs code terminal:

1
2
3
hexo cl
hexo g
hexo d



5.Install Hexo

Enter the following in the command line:

1
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:

1
hexo init

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

Install the dependency packages:

1
npm install

Locally view the Hexo service:

Generate static files:

1
2
3
hexo generate
or
hexo g

Start the local server:

1
2
3
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:

1
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:

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

All configuration files in _config.yml are as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: '10:36'
subtitle: ''
description: ''
keywords:
author: Chenye Meng
language: en
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://nexmaker-fab.github.io/2023zjude-10-36/
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: fluid

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  # repo: git@github.com:mengcye/mengcye.github.io.git
  repo: https://github.com/NexMaker-Fab/2023zjude-10-36.git
  branch: main

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:

1
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:

1
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.

1
![](/img/clock.png)

Home Page

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

Change the homepage title.

1
2
navbar:
  blog_title: "10:36 Team"

Edit the homepage typewriter text.

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

Change the site favicon.

1
2
3
4
5
# Icon for browser tab
favicon: /img/clock1.png

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

Edit the menu bar content.

1
2
3
4
5
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.

1
2
3
4
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#Clear the current static files.
hexo clean
or 
hexo cl

#Generate static files.
hexo generate
or
hexo g

#Deploy
hexo deploy
or 
hexo d

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

9.The final homepage display


10.The fold and file relationship

Our project folder is shown in the picture

The public folder mainly stores the content to be deployed to GitHub

The scaffolds folder mainly stores document examples

The source folder mainly stores the resources used in documents, including images, posts, information pages, etc.

The following are some themes and configuration files, which contain theme and configuration information for web pages. For specific details, please refer to the introduction in the “install hexo” section

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

WebPage
WebPageBuild
https://nexmaker-fab.github.io/2023zjude-10-36/2023/10/16/WebPageBuild/
Author
Chenye Meng
Posted on
October 16, 2023
Licensed under