关于我搭建网站的全过程与如何搭建一个像我这样的博客

hyj120309 Lv1

你需要的与如何获得它们

你需要的

1.一个域名
2.一台服务器或者静态网站托管平台
3.一台电脑

如何获得这些

域名可以在各种云平台注册(腾讯、阿里、华为云等大牌,还有各种外国域名注册平台等,价格不一)我花了12块钱,
服务器是GitHub的静态网站托管——github pages,

在电脑本地安装hexo

首先,你需要安装node.js
而后,打开终端,运行npm install -g hexo-cli来安装hexo
执行以下命令来初始化hexo,其中 folder 为你将用于存储hexo数据的文件夹,你可以创建一个github仓库,clone到本地,因为要使用github pages

1
2
3
$ hexo init <folder>  
$ cd <folder>
$ npm install

初始化完成后,hexo将会在你的项目文件夹中创建以下文件(夹):

./
1
2
3
4
5
6
7
├── _config.yml  
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

现在,你可以将文件全部复制到github仓库中

配置hexo

跟着hexo官方文档修改,我的配置可以在此处查看,不过我使用了第三方主题redefine,网站的显示将会与我的部分配置无关
使用hexo s命令来启动服务器,预览你的博客,在更改配置后需重启服务器使其生效

主题

hexo主题中你可以找到你喜欢的主题,比如我使用的redefine,部分主题有单独的配置,根据主题的readme安装并配置主题,它们将覆盖目录下的_config.yml中的部分设置,就像这样:
主题配置

撰写你的第一篇文章

运行hexo new doc来新建一篇文章,其中”doc”为你的文章标题,进入目录下的source/_posts目录,你将会找到以文章标题命名的.md文件,打开它,你将会看到:

doc.md
1
2
3
4
5
---
title: [文章标题]
date: [创建时间]
tags:
---

---之后撰写你的文章,使用markdown语言
启动服务器,预览你的文章,更改文章后无需重启服务器,刷新页面即可看到新的内容,确定无误后部署至静态托管网站或你的服务器(这里使用github pages)

部署至github pages

运行node -v,程序应该会输出:

out
1
v22.12.0

也就是v x.y.z,记住其中的x,之后会用到
在储存库根目录中创建.github/workflows/文件夹,在其下创建pages.yml文件,写入以下内容,将 - name: Use Node.js 20中的20改为上个步骤记下的x

.github/workflows/pages.yml
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
name: Pages

on:
push:
branches:
- main # default branch

jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
token: $
# If your repository depends on submodule, please see: https://github.com/actions/checkout
submodules: recursive
- name: Use Node.js 20
uses: actions/setup-node@v4
with:
# Examples: 20, 18.19, >=16.20.2, lts/Iron, lts/Hydrogen, *, latest, current, node
# Ref: https://github.com/actions/setup-node#supported-version-syntax
node-version: "20"
- name: Cache NPM dependencies
uses: actions/cache@v4
with:
path: node_modules
key: $-npm-cache
restore-keys: |
$-npm-cache
- name: Install Dependencies
run: npm install
- name: Build
run: npm run build
- name: Upload Pages artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./public
deploy:
needs: build
permissions:
pages: write
id-token: write
environment:
name: github-pages
url: $
runs-on: ubuntu-latest
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4

将本地仓库中的内容使用git push到远程仓库,然后在仓科设置的page标签页中将pages源改为Actions,如下图所示:
pages设置
然后等待action执行完毕,查看你的网站,还可以设置自己的域名
END

  • 标题: 关于我搭建网站的全过程与如何搭建一个像我这样的博客
  • 作者: hyj120309
  • 创建于 : 2024-12-22 18:26:29
  • 更新于 : 2024-12-28 09:38:02
  • 链接: https://www.hyj120309.top/2024/12/22/关于我搭建网站的全过程与如何搭建一个像我这样的博客/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。