零成本从零开始基于GitHub pages搭建个人blog

本文最后更新于 2024年12月16日 上午

前言

本教程为入门级教程。适用于没有任何相关经验，想要自己搭建个人blog，并且可以自定义blog样式，并且追求blog无外部广告的网友。

整体流程大纲为，github上创建github page repository，上传本地网站project，配置部署文件，配置域名（可选），部署成功。如果有相关基础知识，可以自行跳过某些步骤。

前期准备

电脑（本教程使用的是windows电脑）。邮箱。你想好的blog域名。

教程开始

注册GitHub

❗ 重要： 注册的username将会成为你的blog的域名，所以请在注册时注意。

  1. 首先进入GitHub。

  2. 点击右上角Sign up按钮。

  3. 输入自己的邮箱以及自己的密码

  4. 接下来会要求你输入一个username，这里username后续无法修改，并且会变成blog的默认域名（网址）的开头。比如我这里使用了example77777作为用户名，那么github page的默认域名就是example77777.github.io，因此这里要想好自己的username。

  5. 点击continue，完成人机验证，创建成功。

  6. 接下来会给你的注册邮箱发验证码验证，国内邮箱可能需要耐心等几分钟，我这里使用的126邮箱等了五分钟左右。

  7. 可以跳过接下来的设置，也可以按需求点一点，这里无所谓。

  8. 创建账号成功.

blog本地搭建

安装node.js

本教程使用的blog框架是Hexo是基于node.js。若使用其他框架，可以自行安装。

  1. 进入 https://nodejs.org/en/download

  2. 请根据自己的电脑选择对应版本，大部分应该都是64位windows。

  3. 双击运行下载的文件node-v20.11.0-x64.msi（根据选择的版本号可能文件名有所区别）

  4. 按照提示安装完成。

  5. 可能需要重启电脑完成node.js的配置。

配置node.js国内源（可选，建议操作）

npm是nodejs的包管理器。如果国内网络不够流畅，可能使用npm包管理器会下载很慢，甚至卡顿。这时候配置国内镜像可以解决该问题。

  1. 快捷键win+x，点击powershell。

  2. 命令行中输入npm config set registry https://registry.npm.taobao.org 并回车。就可以将镜像源换成淘宝的。 之前的tb的这个不对了，换了域名。改成了npm config set registry https://registry.npmmirror.com/

也可以参考腾讯云镜像源。在命令行中输入npm config set registry http://mirrors.tencent.com/npm/ 就可以把镜像源换成腾讯的。

再放个中科大的镜像。

截图懒得修改了。

安装Git

在上一步中提到的powershell中，输入git --version，检查有没有安装git。如果没有装，请前往Git官方网站下载 Git 安装程序。

安装时，确保选择 Add Git to PATH（将 Git 添加到系统环境变量）。

安装Webstorm

Webstorm是可以用来开发网页的IDE(Integrated development environment 也就是集成开发环境)，是我个人比较喜欢的。你也可以选择自己喜欢的IDE。

  1. 进入jetbrains官方网站，点击download进行下载。
  2. 在登陆处可以选择使用github登录（比较方便），也可以后续再将账号链接到github。
  3. 这是一个收费软件（30天免费试用），可以申请学生免费（学生license一年有效期，到期后可续）
    Jetbrains For Student
  4. 安装完成后，打开软件，通过左下角设置图标，进入Licenses界面。
  5. 可以通过之前申请的学生免费激活，也可以点击start trial免费试用。

安装Hexo

可以使用webstorm插件直接创建hexo项目。

进入Hexo - IntelliJ IDEs Plugin | Marketplace，点击箭头所指向的蓝色按钮。
如果如图显示Install to WebStorm 2023.3.1，点击即可完成安装。然后直接看下一步。

如果显示Get，点击Get，会跳转到版本界面，然后选择最新版下载。如果后续安装报错，请在网页检查一下下载的版本和你的WebStorm版本是不是对应的。
下载后，打开Webstorm，选择plugin，右上角小齿轮图标，点击Install Plugin from disk，然后选择刚刚下载的文件进行安装。

这样就在Webstorm中将hexo插件安装完毕了。

新建Hexo项目

  1. 在Webstorm的Project页面，点击New Project。
  2. 选择Hexo，在location处输入你像存放该项目的位置，文件名可以用项目的名字来命名。
  3. 创建成功

Hexo简单介绍

  1. 在默认生成的source文件夹下，有一个叫做_post的文件夹，以后在blog发布新的文章都通过在这里创建新的.md文件完成。在_post中，有一个hello-world.md。这里有很多基础指令可以点击绿色箭头尝试。
  2. 以hexo server为例，这是在本地启动服务的命令。可以点击hexo server边上的绿色按钮，也可以Alt+F12呼出terminal直接输入。运行结果如下图，可以直接点击蓝色的网址进行预览。
  3. 可以看到一个示例blog已经生成。
  4. 后续可以通过使用别的hexo主题模板，或者调整默认模板的配置（项目中的 _config.yml文件）等方式修改blog的样式。这里先不赘述。在教程后blog后续优化及更新教程中，会稍作介绍。

到这里，本地创建blog已经完成。

部署到github

新增修改配置文件

  1. 在项目页面，这里我们需要添加一份给github page使用的配置文件。
    找到项目目录下的.github文件夹，在该文件夹下新建名叫workflows的文件夹。右键选择New，选择Directory，在弹出框中输入workflows。
  2. 然后再右键这个新创建的workflows文件夹，new一个File，命名为pages.yml
    然后将以下代码复制黏贴进入pages.yml，代码来源官方教程GitHub Pages | Hexo

其中可能出问题的点在于第六行的main，可能根据情况需要被修改成master。后续会详细描述。

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
name: Pages

on:
 push:
   branches:
     - main  # default branch

jobs:
 build:
   runs-on: ubuntu-latest
   steps:
     - uses: actions/checkout@v3
       with:
         token: ${{ secrets.GITHUB_TOKEN }}
         # If your repository depends on submodule, please see: https://github.com/actions/checkout
         submodules: recursive
     - name: Use Node.js 20.x
       uses: actions/setup-node@v2
       with:
         node-version: '20'
     - name: Cache NPM dependencies
       uses: actions/cache@v2
       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@v2
       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@v2

放一张我的截图

  1. 进入项目目录下的_config.yml文件，将第16行修改成 https://你的username.github.io/的形式（请不要按照官方注释的格式加上project，会出问题）。
    截图中展示我的username，我的username是example77777，所以输入https://example77777.github.io/

使用webstorm自带版本控制功能连接git

  1. 在webstorm中选择左上角菜单栏中选择setting。

  2. 找到version control，再选中github。然后登陆你的Github账号。

  3. 点击左上角的version control，再点击share project on，最后选择Github。

  4. 这里将Repository name修改为你的github username.github.io的形式。比如我在教程中github注册用户名为example77777，我这里就命名为example77777.github.io。
    然后注意将Private勾选掉，设置为private将没人可以访问你的网站。

  5. 然后等待几秒，会出现第一次commit的页面，直接点击Add即可。

  6. 上传成功后，进入github.com，如果你保持一开始的登陆状态，在页面左上角将会看到成功创建的新repository。点击即可进入项目。

接下来要解释，上面的第四条提到的可能出现的问题如何确认排查了。 如果没有问题，直接跳到第12步。

git基本操作介绍

在上张截图中红框框圈出来的部分为master，也就是当前仓库的主要分支名称。
而我们需要使得.github/workflows/pages.yml中的第六行和你主要分支名称保持一致。
仓库的主要分支有时候在自动创建时叫master，有的时候会叫main，本质没什么区别。

  1. 前往之前创建的.github/workflows/pages.yml文件，修改第五行的branches:，使起和你的分支名保持一致。
  2. 然后按照以下截图，commit操作，再push。

点击commit


git仓库设置，完成网页部署

  1. 然后接着上面第9步，点击setting，选中左边栏中的page
  2. 选中Source框，选择GitHub actions。
  3. 如果回到repository页面，不出意外的话（可能需要等几分钟），刷新一下，将会在右下角看到deployment已经成功的标志。
  4. 此时回到setting中的pages页面，可以看到网站已经成功部署。
  5. 可以点击链接查看网页，网站部署到这里就成功了。

自定义域名（可选，要花钱）

  1. 因为github不在国内设置服务器，不需要备案。
  2. 选择一个域名提供商，我这边选用了Squarespace Domains，国内用aliyun或者腾讯云应该差不多流程。
  3. 输入想要的域名，查看是否被占用。选择要使用的进行购买即可。
  4. 购买后，会出现一个管理界面。点击你的域名。
  5. 点击右下角的Manage Domain Settings按钮，然后不用修改选项，点击右上角的edit dns。
  6. 在Custom Records这一栏（好像是这么叫的，默认的叫别的名字，我不记得了，删了就不见了），点击ADD RECORD，添加四个A类record，在各自的data中加入github page专用的ip地址
    1
    2
    3
    4
    185.199.108.153
    185.199.109.153
    185.199.110.153
    185.199.111.153
    如果想配置IPV6或者别的，参照github官方文档：Managing a custom domain for your GitHub Pages site
    • 再添加CNAME类型的record
    • host填www
    • data栏填写你的github page域名，比如教程中使用的是example77777.github.io
  7. 然后回到github repository中，进入setting的page页面，再custom domain中输入www+你的域名。
  8. 等待最多24小时（这个更新会比较慢）。
  9. 访问域名即可显示你的网站。

blog后续优化及更新教程

  • 新建blog，可以直接在/source/_posts文件夹下新建.md文件。可以嵌套多层目录。
  • 每次修改后，本地预览之前，请执行hexo clean清除db.json缓存文件。
    • 不是必须的，只是如果有缓存的话，有可能会出现渲染问题。例如：已经删掉的tag还出现在你的tag cloud列表中。
    • github page不需要额外操作，在项目目录下的.gitignore中定义了不会push db.json文件。 而每次push操作，github page都会从头部署一遍，不会出现问题。
  • 选择合适的theme Themes | Hexo
    • 下载了喜欢的模板后，将模板的文件夹放到Hexo项目的/themes文件夹下即可。
    • 修改细节可参考模板自带的文档。

Reference:

  1. https://docs.github.com/en/pages

    ↩

教程或资源
#笔记 #Tutorial
零成本从零开始基于GitHub pages搭建个人blog
作者
Nitch
发布于
2024年1月27日
许可协议