一小时搭建完自己的个人网站

发表于 分类于 本文字数： 1.6k 阅读时长 ≈ 6 分钟

1. 前言

拥有自己的个人网站一直是我的一个目标。

在网上看了很多方法之后我最终选择了 GitHub Pages + Hexo 这条技术路线，原因有两点：

  • 完全免费，学生党没有多少钱。
  • 比较方便，有现成的框架可用。

整个搭建过程快的话半小时就可以搞定。Windows/Linux/macOS 通用。

搭建完成后大概是这样子的：青羽的博客

2. 准备环境

准备一个 GitHub 账号并新建一个仓库，仓库名称为 <username>.github.io。

<username>代表你的 GitHub 注册用户名，<useremail>代表你的 GitHub 注册邮箱。

安装 Node.js 和 Git。

如果是初次使用 git，需要先配置用户名和邮箱信息：

1
2
git config --global user.name "<username>"
git config --global user.email "<useremail>"

生成 ssh 密钥文件：

1
ssh-keygen -t rsa -C "<useremail>"

默认不设置密码，直接回车就行。

复制自己用户家目录下生成的 .ssh/id_rsa.pub 文件的全部内容。

打开 GitHub 的 SSH 设置页面：SSH and GPG keys，New SSH key，Title 任取，粘贴刚刚复制的字符串到 Key，然后 Add SSH key。

3. 安装 Hexo

Hexo 是一个轻量级博客框架。

打开终端执行npm install hexo-cli -g安装 Hexo。

选定一个目录作为存放站点源文件的上级目录，在该目录下执行hexo init "<site>"，这里的<site>是自己取的站点目录名称。

初始化完成后执行cd "<site>" && npm install进入站点目录并安装依赖。

到这一步，本地博客算是搭建好了，执行hexo s启动本地服务器测试一下。默认情况下，网址是：http://localhost:4000/。

如果成功的话可以看见官方的默认页面：

4. 部署网站

首先在站点目录下找到并打开站点配置文件 _config.yml ，找到 url 字段的值，修改为https://<username>.github.io。

如果你不希望将站点源码也上传到 GitHub 的话，那么请参考一键部署文档，但是这种方法有一个缺点，就是不能同步对站点源码进行版本管理且每次修改完需要手动部署。下述方法利用 GitHub Actions 同步对站点源码进行版本管理并实现自动部署。

首先在站点目录内git init，将站点源码纳入 git 版本控制系统中成为本地仓库。注意修改默认主分支名称git branch -m master main。然后将 GitHub 仓库 <username>.github.io 设为默认远程仓库。

在远程仓库中前往 Settings > Pages > Source，并将 Source 改为 GitHub Actions。

在本地仓库中建立 .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
name: Pages

on:
  push:
    branches:
      - main # default branch

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          submodules: recursive
      - name: Use Node.js 20
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Cache NPM dependencies
        uses: actions/cache@v4
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-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: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

执行以下命令保存提交并推送到远程仓库：

1
2
3
git add .
git commit -m "init site"
git push -u origin main

推送会触发 Actions，可以在远程仓库的 Actions 页面查看自动部署进度，一般几十秒就完成了。

打开浏览器输入你的网站地址：https://<username>.github.io/，就可以看到你的网站已经上线了，大功告成！

如有任何问题，请参阅GitHub Pages 部署文档

5. 撰写文章

1
hexo n "HelloWorld"

n 是 new 的缩写，表示新建一篇文章。

可以看到在 source/_posts 目录下多了一个 HelloWorld.md 文件，这就是一篇文章的源文件了。写完之后保存、提交即可。

文章使用 Markdown 写成，关于 Markdown 可参考：Markdown 教程 | 菜鸟教程

要删除文章的话，直接把源文件删除即可（确保至少有一篇文章存在，否则可能出错）。

另外，如果想要把文章发布到知乎平台上的话，直接导入 Markdown 到知乎文章编辑器解析会有些问题，我写了个 Hexo 插件： hexo-console-zhihu 方便导入 Hexo Markdown posts 到知乎。

6. 优化网站

1. 主题

Hexo 有许多好看的主题，这里以我用的 NexT 主题为例讲解怎样更换主题：

  1. 首先在站点目录下打开终端
  2. 执行npm install hexo-theme-next安装主题包
  3. 执行cp node_modules/hexo-theme-next/_config.yml _config.next.yml检出主题配置文件
  4. 打开站点配置文件 _config.yml，找到 theme 字段，并将其值更改为 next
  5. （可选）找到 language 字段，并将其值更改为 zh-CN（在 hexo-theme-next/languages 目录下可查看主题支持的语言）
  6. 在切换主题之后， 我们最好使用 hexo clean && hexo s 命令来清除 Hexo 的缓存再预览

在更换了主题之后界面美观了许多，终于可以舒舒服服地写文章啦~

但是很不好意思，倘若你的文章里有 \(\LaTeX\) 公式或者想用 Markdown 格式插入图片，你会发现无法显示……

作为一名技术宅，文章里怎么可能不用公式不用图片嘛，这两个坑必须解决了！

2. 公式

打开主题配置文件 _config.next.yml 并找到 math 字段，修改为：

1
2
3
4
5
math:
  every_page: true

  mathjax:
    enable: true

说一下，every_page 默认是 false，需要单独在每篇文章的 front-matter 里设置mathjax: true。这里为了图方便，全面开启 mathjax 渲染功能，速度会稍微降低一点点。

至此，\(\LaTeX\) 公式插入问题解决！

3. 图片

打开站点配置文件 _config.yml，找到 post_asset_folder 字段，并将其值更改为 true ，这样新建文章的同时 Hexo 会自动在同目录下新建一个以文章名命名的空目录以方便存放该文章要用到的资源。

安装一个我自己写的 Markdown 格式插入图片的插件：

1
npm install hexo-markdown-image

假设在

1
2
3
4
5
+---HelloWorld
|   +-- 1.png
|   +-- 2.png
|   +-- 3.png
+---HelloWorld.md

这样的目录结构（目录名和文章名一致）中，在文章源代码里只要用 ![](HelloWorld/1.png) 就可以插入图片了~

网上也有其他方法，但这种方法不仅最后部署时能正确显示图片，在本地预览 Markdown 时也能正确显示图片。

4. 更多

关于 Hexo 框架的更多信息请参考：Hexo

关于 NexT 主题的更多信息请参考：NexT - Theme for Hexo