目录

个人博客建站全过程

目录

技术选型

使用Hexo+keep+Github Actions+jsdelivr这一套技术实现blog搭建及自动化部署

开始搭建

安装node

下载地址:node下载 .安装LTS版本。

安装 Hexo

1
npm install hexo-cli -g

我们强烈建议永远安装最新版本的 Hexo,以及 推荐的 Node.js 版本

Hexo 版本最低兼容 Node.js 版本
5.0+10.13.0
4.1 - 4.28.10
4.08.6
3.3 - 3.96.9
3.2 - 3.30.12
3.0 - 3.10.10 or iojs
0.0.1 - 2.80.10

初始化博客目录

1
2
hexo init Smithkenny.github.io 
# 这里的Smithkenny换成你自己的英文名

初始化完成后,我们就进入我们的目录

1
cd Smithkenny.github.io

安装

1
npm install

clean一下,然后生成静态页面

1
2
hexo clean
hexo g

把你的网站运行起来

1
hexo s

打开你的浏览器,输入 localhost:4000

自此,你的个人网站就这么速度的搭建起来了!

主题选择

初始化博客后,指定文件夹的目录如下:

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

_config.yml

网站的 配置 信息,您可以在此配置大部分的参数。

我的配置如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
# Site
title: Peng's Blog
subtitle: Peng 的个人博客
description: ''
keywords:
author: Haipeng
language: zh-CN
timezone: Asia/Shanghai

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://www.haipengv.com

package.json

应用程序的信息。EJS , StylusMarkdown renderer 已默认安装,您可以自由移除。

scaffolds

模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的文章文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

themes

主题 文件夹。Hexo 会根据主题来生成静态页面。

选择一个主题

这里可以选择你要的主题 ,我选择的是、keep主题,因为它很简洁。

下载主题

keep主题github地址:https://github.com/XPoet/hexo-theme-keep

keep 主题官方文档:https://keep-docs.xpoet.cn/

1
2
# 这里使用npm方式安装方便后期进行代码托管维护
npm install hexo-theme-keep

配置主题

  • 主题下载完之后,在你根目录下的 _config.yml 文件中,修改 theme 为你的主题名字

    1
    
    theme: keep
    

我这里选择自定义hexo-theme-keep主题,可以参考keep主题平滑升级

在博客根目录下的 source目录中新建文件夹_data

node_modules下的hexo-theme-keep目录中复制出_config.yml文件到source/_data/中,并重命名为keep.yml

keep.yml可根据文档配置对应的属性。

重新生成和运行

1
2
3
hexo clean
hexo g
hexo s

keep主题

/postimages/keep主题.webp

博客文章创建

有两种方式来新建你的博文

命令形式

在你的blog目录下使用如下命令:

1
hexo new hello # 这里的article写上你的文章的名称

你的source/_posts下就会生成一个 hello.md文件,在这个文件下就可以写上你的博客内容了。用 Markdown 的语法去写。

直接新建方式

直接点的方式就是直接在source/_posts新建一个 Markdown 文件。

打上标签

打标签能让你的文章方便检索。

打开标签功能:

1
hexo new page tags

这时候你的source/下生成 tags/index.md 文件,我们将其打开,然后把它改成:

1
type: "tags" comments: false

这时候你要为你的文章打上标签就可以在文章的头部写上

1
2
3
4
5
6
---
title: Java 安装与使用
date: 2021-12-28 15:36:27
tags: Java
tags: <<其他你想打的标签>>
---

添加分类

分类,归档,是你博客的特性之一。

打开分类功能:

1
hexo new page categories

这说你的source目录下生成 categories/index.md 文件,我们将其打开,把它改成:

1
2
type: "categories"
comments: false

这时候你就可以给你的文章归类存档了,使用方式就是在你的文章的头部加上

1
2
3
4
5
6
7
---
title: Java 安装与使用
date: 2021-12-28 15:36:27
tags: Java
categories: Java
categories: <<其他你想分的类>>
---

注意:标签和分类要确定你的配置文件 _config.yml 是否有打开了 tag_dir: tags 和 category_dir: categories。另外,Markdown 的语法是写作最优雅最简洁最简单的,如果之前没用过的建议去学一下Markdown 语法说明 ,一般一个钟左右就能掌握。因为它和HTML那样简单。

添加评论系统

keep主题提供评论系统,详情见keep comment

这里先暂时不开启评论了。因为发现创建完之后还是无法评论。

部署到线上

可以通过GitHub Pages来创建免费的线上访问地址。

安装 Git

  • Windows:下载并安装 git .
  • Mac:使用 Homebrew , MacPorts 或者下载 安装程序
  • Linux (Ubuntu, Debian):sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

Mac 用户

如果在编译时可能会遇到问题,请先到 App Store 安装 Xcode,Xcode 完成后,启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

Windows 用户

对于中国大陆地区用户,可以前往 淘宝 Git for Windows 镜像 下载 git 安装包。

创建Github pages 仓库

创建一个xxx.github.io的 public 仓库,这里的xxx写你的名字,比如我写的是 Smithkenny.github.io ,那么到时我就可以通过 Smithkenny.github.io 来访问我的网站了。 创建完成之后,那么你就有自己的 Git 地址了。

安装hexo-deployer-git

1
2
cd Smithkenny.github.io
npm install hexo-deployer-git --save

配置你的Git

打开你的配置文件_config.yml

1
2
3
deploy:
  type: git
  repo: https://github.com/xxx/xxx.github.io.git // 输入你的git地址

github地址查看:

/postimages/public-地址.webp

推送你的网站到Github上

1
2
hexo d
# d 就是 deploy,部署上去的意思。

访问你的网站

直接在浏览器输入你的 xxx.github.io 就可以访问了。

绑定自己的域名

添加 CNAME 文件
1
2
3
4
# 进入sources
cd sources
# 创建CNAME文件,写入自己的域名,如:www.haipengv.com
touch CNAME
在你的域名商后台进行 DNS 解析添加两条记录
1
2
3
4
5
6
主机记录: @
  记录类型:A
  记录值:ip1 或者 ip2
主机记录: www
  记录类型: CNAME
  记录值: Smithkenny.github.io  (这里就是你的github仓库名称)

GitHub 设置域名

在你的 GitHub 设置域名,在你的 GitHub 博客项目中点击 Settings,在 GitHub Pages 下的 Custom domain 写上你的域名,然后 save。

/postimages/github域名绑定.webp

自动部署

根据之前的步骤我们使用 Hexo + Keep 主题搭建了一个在线博客,下面教你如何使用 GitHub Actions 将博客自动部署到 GitHub Pages。以下内容参考了keep主题作者的博文 .

GitHub Actions

创建 GitHub 仓库

创建一个私有仓库用来存储 Hexo 项目源代码。(保证你的重要信息不泄露)

1
myblog-source仓库的master分支用来存放源代码

注意私有仓库默认分支已经变为main。需要更改名称为master

/postimages/私有仓库默认名称更改1.webp

/postimages/私有仓库默认名称更改2.webp

创建私有仓库

/postimages/私有仓库创建.webp

公共仓库用来存储编译之后的静态页面。(这里就不用在创建仓库了,之前我们部署过github pages到xxx.github.io)

xxx.github.io这个仓库的master分支用来存储静态文件

当私有仓库的 master 有内容 push 进来时(例如:主题文件,文章 md 文件、图片等), 会触发 GitHub Actions 自动编译并部署到公共仓库的 master分支。

创建 GitHub Token
  • 创建一个有 repoworkflow 权限的 GitHub Token

/postimages/个人token2.webp

/postimages/个人token3.webp

/postimages/个人token1.webp

  • 新生成的 Token 只会显示一次,如有遗失,重新生成即可。
创建 repository secret
  • 将上面生成的 Token 添加到私有仓库的 Secrets 里,并将这个新增的 secret 命名为 HEXO_DEPLOY (名字无所谓,看你喜欢)。
  • 步骤:私有仓库 -> settings -> Secrets -> New repository secret

/postimages/私有仓库secrets.webp

新创建的 secret HEXO_DEPLOY 在 Actions 配置文件要用到,需跟配置文件保持一致!

添加 Actions 配置文件
  1. 在你的 Hexo 项目根目录下创建 .github 文件夹。
  2. .github 文件夹下创建 workflows 文件夹。
  3. workflows 文件夹下创建 hexo-deploy.yml 文件。

hexo-deploy.yml 文件配置如下:(这里是关键)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
name: deploying Hexo project to GitHub pages
on:
  push:
    branches:
      - master # master 分支有 push 行为时就触发这个 action

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@master

      - name: Build and Deploy
        uses: theme-keep/hexo-deploy-github-pages-action@master # 使用专门部署 Hexo 到 GitHub pages 的 action
        env:
          PERSONAL_TOKEN: ${{ secrets.HEXO_DEPLOY }} # secret 名
          PUBLISH_REPOSITORY: Smithkenny/Smithkenny.github.io # 公共仓库,格式:GitHub 用户名/仓库名
          BRANCH: master # 分支,我这里是推送到Smithkenny/Smithkenny.github.io仓库里的master分支(根据自己的仓库进行填写)
          PUBLISH_DIR: ./public # 部署 public 目录下的文件
自动部署触发流程
  • 修改你的 Hexo 博客源代码(例如:增加文章、修改文章、更改主题、修改主题配置文件等等)。
  • 把你修改过的 Hexo 项目内容(只提交修改过的那部分内容) push 到 GitHub 公共仓库(本例:Smithkenny.github.io)的 master 分支。
  • GitHub Actions 检测到 master 分支有内容 push 进来,会自动执行 action 配置文件的命令,将 Hexo 项目编译成静态页面,然后部署到私有仓库的 master 分支。
  • 在私有仓库的 Actions 可以查看到你配置的 action。
  • 这样的好处是源码保存在线上私有仓库中,具有可移植性。更改源码后不用再手动重新部署、上传。

/postimages/私有仓库action.webp

源码上传

上传前的准备

配置ssh key

win10 ssh key 默认在当前用户的.ssh文件夹内。

1
ssh-keygen -t rsa -C "[email protected]"

密钥路径: .ssh\id_rsa.pub 公钥 .ssh\id_rsa 私钥

打开你的github主页,进入个人设置 -> SSH and GPG keys -> New SSH key:

名字:git-push 密钥输入公钥内容。 测试时是否成功:

在网站根路径下右键Git Bash Here,通过git 命令来上传源码到私有仓库。
还需要配置:
1
2
git config --global user.name "Smithkenny"// 你的github用户名,非昵称
git config --global user.email  "[email protected]"// 填写你的github注册邮箱

上传源码

初始化git

1
git init

将改动添加到暂存区

1
git add . 

添加说明

1
git commit -m "代码上传"

将本地更改推送到远程master分支

1
git push origin master

注意

如果报错,说明本地仓库代码和私有仓库代码不一致,可以用以下方式解决。

先从私有库(myblog-source)把代码拉下来,会自动合并的(不用操心)

1
git pull origin master

可以通过如下命令进行代码合并

1
git pull --rebase origin master 

再将本地更改推送到远程master分支

1
git push origin master 

每次新增、修改文章都需要执行以下代码一次:

1
2
3
git add . (将改动添加到暂存区)
git commit -m "提交说明"
git push origin master 将本地更改推送到远程master分支。

然后私有仓库中的action检测到有代码改动会自动重新部署。

总结:

笔记本生成id_rsa是私钥,id_rsa.pub是公钥。公钥可以用记事本打开 配置路径:github网站–>Settings–>SSH and GPG keys 配置公钥。用于笔记本和github连接。 github action 执行流程,公共仓展示静态页面,私有仓保存文章,源代码等等。action检测到私有仓库内变动,会自动打包部署到公共仓。不用在笔记本本地再部署,上传。

上传代码需要用笔记本创建的私钥和私有仓库中secrects 中的公钥进行匹配。

hexo g 会在网站的根路径下创建public目录和db.json

hexo clean 会删除hexo g 执行后所创建的内容。

遇到的问题

源代码上传后,页面使用的主题配置没生效,修改过的配置都没生效,logo也不显示,绑定的自定义域名也失效了。

解决方法

在网站根路径下的source文件夹内创建_data文件夹,把keep主题配置 _config.yml复制一份命名为keep.yml。

如果以后配置有所更改,需要_data文件夹内的keep.yml和keep主题内的 _config.yml文件保持一致。

source文件夹内新建images 文件夹,用来存放图片。再创建CNAME 文件,文件内填写个人域名。如:haiewebpv.com

再次上传源码。等待部署完成后查看网站。

D:\newblog\source\keep.yml 文件为D:\newblog\node_modules\hexo-theme-keep_config.yml的备份文件。平滑升级hexo后 _config.yml会重置,所以要备份。

站点根路径:

D:\newblog\

D:\newblog\source 内文件夹:

1
2
3
4
5
6
7
8
_data
_posts
about
categories
images
links

CNAME # 文件

keep 主题配置文件路径

1
D:\newblog\node_modules\hexo-theme-keep\_config.yml

如何访问网站?

1
2
https://smithkenny.github.io/
https://haipengcv.com

新上传文章流程

在网站根目录内,右键git bash here 并创建文章标题

1
hexo new title "new-article"

上述命令的结果是在 ./hexo/source/_posts 路径下新建了一个 new-article.md` 文件。

进入到/source/_posts内编辑文章内容。

1
2
3
4
5
6
7
8
9
cd source/_posts
vim new-article.md

---
title: new-article
date: 2022-01-01 18:11:25
tags:
categories:
---

也可以用typora打开,直接编辑。也可以创建分类categories 便于搜索。

博客中的图片处理

有以下两种方式保存图片:

将图片上传到网站根路径source/images中,在文章中引用相对路径。

使用网路路径,然后在文章中引用该路径。

下面来说明如何使用网路路径

搭建个人图床,使用github公有仓库充当云存储。新建公有仓库,起名为Myimage。

并在仓库内创建一个img文件夹并加以说明。

/postimages/图床1.webp

创建个人访问令牌

获取路径

Settings –> Developer settings–> Personal access tokens –> New personal access token –> copy token

jsdelivr充当cdn,使图片访问更快

https://www.jsdelivr.com/?docs=gh

获取cdn地址

/postimages/cdn1.webp

举例:

我的这个图床仓库名是Smithkenny/Myimage

https://github.com/Smithkenny/Myimage

cdn地址为:

https://fastly.jsdelivr.net/gh/Smithkenny/Myimage/img 图片名称.webp

使用picGo充当图片git push 工具

https://github.com/Molunerfinn/PicGo

安装地址:https://github.com/Molunerfinn/PicGo/releases

/postimages/picgo.webp

配置picGo

/postimages/picgo1.webp

将github图床设置为默认图床。

上传图片处理

PicGo支持批量和单个的图片上传

  • 批量上传,把图片批量拖拽到大红框
  • 单个上传,复制后,点击小红框

/postimages/picgo2.webp

文章中使用图床中的图片格式

中括号小括号

后记

keep主题相关设置

设置标题、作者、url自定义logo、背景图片。开启百分比滚动条。添加个人联系方式。增加categories、links、about。开启文章预览。字数统计、作者标签。文章中代码可复制、启用左侧目录。开启文章最下方版权所有,开启全局搜索功能、开启rss订阅、cdn、慢加载功能。

更换电脑如何上传文章到GitHub

前期准备

新电脑需要安装git、hexo。并把旧电脑用户目录下.ssh文件夹内公钥和私钥复制出来到新电脑的用户目录的.ssh文件夹内。

具体步骤

创建myblog文件夹

1
/e/myblog

右键git bush here。初始化git,会自动在/e/myblog目录内创建.git文件夹

1
git init 

测试笔记本到GitHub私有仓库的连通性。

1
2
3
ssh -T [email protected]

Hi Smithkenny! You've successfully authenticated, but GitHub does not provide shell access.

添加信息

1
2
git config --global user.name "Smithkenny"// 你的github用户名,非昵称
git config --global user.email  "[email protected]"// 填写你的github注册邮箱

配置远端仓库并远程拉取源代码到本地

1
git remote add origin [email protected]:Smithkenny/myblog-source.git
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
git pull origin master

remote: Enumerating objects: 345, done.
remote: Counting objects: 100% (345/345), done.
remote: Compressing objects: 100% (248/248), done.
remote: Total 345 (delta 167), reused 231 (delta 71), pack-reused 0
Receiving objects: 100% (345/345), 1.87 MiB | 105.00 KiB/s, done.
Resolving deltas: 100% (167/167), done.
From github.com:Smithkenny/myblog-source
 * branch            master     -> FETCH_HEAD
 * [new branch]      master     -> origin/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
git pull origin master

remote: Enumerating objects: 360, done.
remote: Counting objects: 100% (360/360), done.
remote: Compressing objects: 100% (256/256), done.
remote: Total 360 (delta 178), reused 242 (delta 78), pack-reused 0
Receiving objects: 100% (360/360), 1.87 MiB | 1.33 MiB/s, done.
Resolving deltas: 100% (178/178), done.
From github.com:Smithkenny/myblog-source
 * branch            master     -> FETCH_HEAD
 * [new branch]      master     -> origin/master
error: The following untracked working tree files would be overwritten by merge:
        .github/dependabot.yml
        .gitignore
        _config.landscape.yml
        _config.yml
        package-lock.json
        package.json
        scaffolds/draft.md
        scaffolds/page.md
        scaffolds/post.md
        themes/.gitkeep
Please move or remove them before you merge.
Aborting

清空github上私有仓库源代码,将本地重新创建好的博客源码上传到远端私有仓库。

github actions报错

需要重新创建博客源码文件夹,重复以下操作。

 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
1.初始化博客文件夹,如果初始化缓慢需要设置代理。
#$ export http_proxy=http://<Windows 主机的 IP 地址>:<代理端口>
#$ export https_proxy=http://<Windows 主机的 IP 地址>:<代理端口>
#使用下面的命令取消代理:
#$ unset http_proxy https_proxy
hexo init myblog-source
2.进入到目录
cd myblog-source
npm install
3.将旧文件夹内_config.yaml复制到myblog-source内
4.下载主题,使用keep主题
npm install hexo-theme-keep
5.重新生成和运行
hexo clean
hexo g
hexo s
6.创建标题、分类、归档、友联、关于,在Myblog-source\source内新建images文件夹,并分别在旧文件夹下对应位置将内容复制到新博客内
hexo new page "categories"
hexo new page "about"
hexo new page "links"
7.将旧文件夹source\_data复制到\Myblog-source\source\_data内
8.将旧文件夹\node_modules\hexo-theme-keep中_config.yml复制到新博客路径\Myblog-source\node_modules\hexo-theme-keep内
9.将旧文件夹根路径下CNAME文件复制到新博客根路径下
10.在新博客文件夹内初始化git,会生成.git文件夹。
git init
git add .
git commit -m "代码上传"
git push origin master
如果报以下错误:Github "Updates were rejected because the remote contains work that you do not have locally."
则:
查看git远程仓库
git remote -v
没有则使用以下命令添加:
git remote add origin [//your github url]
拉取远程仓库镜像
git pull origin master --allow-unrelated-histories
10.然后再执行以下命令推送到仓库
git add .
git commit -m "代码上传"
git push origin master

报错解决参考

警告
本文最后更新于 January 2, 2022,文中内容可能已过时,请谨慎使用。