个人博客建站全过程
技术选型
使用Hexo+keep+Github Actions+jsdelivr这一套技术实现blog搭建及自动化部署
开始搭建
安装node
下载地址:node下载 .安装LTS版本。
安装 Hexo
|
|
我们强烈建议永远安装最新版本的 Hexo,以及 推荐的 Node.js 版本 。
Hexo 版本 | 最低兼容 Node.js 版本 |
---|---|
5.0+ | 10.13.0 |
4.1 - 4.2 | 8.10 |
4.0 | 8.6 |
3.3 - 3.9 | 6.9 |
3.2 - 3.3 | 0.12 |
3.0 - 3.1 | 0.10 or iojs |
0.0.1 - 2.8 | 0.10 |
初始化博客目录
|
|
初始化完成后,我们就进入我们的目录
|
|
安装
|
|
clean一下,然后生成静态页面
|
|
把你的网站运行起来
|
|
打开你的浏览器,输入 localhost:4000
。
自此,你的个人网站就这么速度的搭建起来了!
主题选择
初始化博客后,指定文件夹的目录如下:
|
|
_config.yml
网站的 配置 信息,您可以在此配置大部分的参数。
我的配置如下:
|
|
package.json
应用程序的信息。EJS , Stylus 和 Markdown 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/
|
|
配置主题
主题下载完之后,在你根目录下的 _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
可根据文档配置对应的属性。
重新生成和运行
|
|
keep主题
博客文章创建
有两种方式来新建你的博文
命令形式
在你的blog目录下使用如下命令:
|
|
你的source/_posts下就会生成一个 hello.md
文件,在这个文件下就可以写上你的博客内容了。用 Markdown 的语法去写。
直接新建方式
直接点的方式就是直接在source/_posts
新建一个 Markdown 文件。
打上标签
打标签能让你的文章方便检索。
打开标签功能:
|
|
这时候你的source/下生成 tags/index.md 文件,我们将其打开,然后把它改成:
|
|
这时候你要为你的文章打上标签就可以在文章的头部写上
|
|
添加分类
分类,归档,是你博客的特性之一。
打开分类功能:
|
|
这说你的source目录下生成 categories/index.md 文件,我们将其打开,把它改成:
|
|
这时候你就可以给你的文章归类存档了,使用方式就是在你的文章的头部加上
|
|
注意:标签和分类要确定你的配置文件 _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
|
|
配置你的Git
打开你的配置文件_config.yml
:
|
|
github地址查看:
推送你的网站到Github上
|
|
访问你的网站
直接在浏览器输入你的 xxx.github.io
就可以访问了。
绑定自己的域名
添加 CNAME 文件
|
|
在你的域名商后台进行 DNS 解析添加两条记录
|
|
GitHub 设置域名
在你的 GitHub 设置域名,在你的 GitHub 博客项目中点击 Settings,在 GitHub Pages 下的 Custom domain 写上你的域名,然后 save。
自动部署
根据之前的步骤我们使用 Hexo + Keep 主题搭建了一个在线博客,下面教你如何使用 GitHub Actions 将博客自动部署到 GitHub Pages。以下内容参考了keep主题作者的博文 .
GitHub Actions
创建 GitHub 仓库
创建一个私有仓库用来存储 Hexo 项目源代码。(保证你的重要信息不泄露)
|
|
注意私有仓库默认分支已经变为main。需要更改名称为master
创建私有仓库
公共仓库用来存储编译之后的静态页面。(这里就不用在创建仓库了,之前我们部署过github pages到xxx.github.io)
xxx.github.io这个仓库的master分支用来存储静态文件
当私有仓库的 master
有内容 push
进来时(例如:主题文件,文章 md 文件、图片等), 会触发 GitHub Actions 自动编译并部署到公共仓库的 master
分支。
创建 GitHub Token
- 创建一个有 repo 和 workflow 权限的 GitHub Token 。
- 新生成的 Token 只会显示一次,如有遗失,重新生成即可。
创建 repository secret
- 将上面生成的 Token 添加到私有仓库的
Secrets
里,并将这个新增的secret
命名为HEXO_DEPLOY
(名字无所谓,看你喜欢)。 - 步骤:私有仓库 ->
settings
->Secrets
->New repository secret
。
新创建的 secret HEXO_DEPLOY
在 Actions 配置文件要用到,需跟配置文件保持一致!
添加 Actions 配置文件
- 在你的 Hexo 项目根目录下创建
.github
文件夹。 - 在
.github
文件夹下创建workflows
文件夹。 - 在
workflows
文件夹下创建hexo-deploy.yml
文件。
hexo-deploy.yml
文件配置如下:(这里是关键)
|
|
自动部署触发流程
- 修改你的 Hexo 博客源代码(例如:增加文章、修改文章、更改主题、修改主题配置文件等等)。
- 把你修改过的 Hexo 项目内容(只提交修改过的那部分内容)
push
到 GitHub 公共仓库(本例:Smithkenny.github.io)的master
分支。 - GitHub Actions 检测到
master
分支有内容push
进来,会自动执行 action 配置文件的命令,将 Hexo 项目编译成静态页面,然后部署到私有仓库的master
分支。 - 在私有仓库的 Actions 可以查看到你配置的 action。
- 这样的好处是源码保存在线上私有仓库中,具有可移植性。更改源码后不用再手动重新部署、上传。
源码上传
上传前的准备
配置ssh key
win10 ssh key 默认在当前用户的.ssh文件夹内。
|
|
密钥路径: .ssh\id_rsa.pub 公钥 .ssh\id_rsa 私钥
打开你的github主页,进入个人设置 -> SSH and GPG keys -> New SSH key:
名字:git-push 密钥输入公钥内容。 测试时是否成功:
|
|
在网站根路径下右键Git Bash Here,通过git 命令来上传源码到私有仓库。
还需要配置:
|
|
上传源码
初始化git
|
|
将改动添加到暂存区
|
|
添加说明
|
|
将本地更改推送到远程master分支
|
|
注意
如果报错,说明本地仓库代码和私有仓库代码不一致,可以用以下方式解决。
先从私有库(myblog-source)把代码拉下来,会自动合并的(不用操心)
|
|
可以通过如下命令进行代码合并
|
|
再将本地更改推送到远程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 内文件夹:
|
|
keep 主题配置文件路径
|
|
如何访问网站?
|
|
新上传文章流程
在网站根目录内,右键git bash here 并创建文章标题
|
|
上述命令的结果是在 ./hexo/source/_posts
路径下新建了一个 new-article.md` 文件。
进入到/source/_posts内编辑文章内容。
|
|
也可以用typora打开,直接编辑。也可以创建分类categories 便于搜索。
博客中的图片处理
有以下两种方式保存图片:
将图片上传到网站根路径source/images中,在文章中引用相对路径。
使用网路路径,然后在文章中引用该路径。
下面来说明如何使用网路路径:
搭建个人图床,使用github公有仓库充当云存储。新建公有仓库,起名为Myimage。
并在仓库内创建一个img文件夹并加以说明。
创建个人访问令牌
获取路径
Settings –> Developer settings–> Personal access tokens –> New personal access token –> copy token
jsdelivr充当cdn,使图片访问更快
https://www.jsdelivr.com/?docs=gh
获取cdn地址
举例:
我的这个图床仓库名是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
配置picGo
将github图床设置为默认图床。
上传图片处理
PicGo支持批量和单个的图片上传
- 批量上传,把图片批量拖拽到大红框
- 单个上传,复制后,点击小红框
文章中使用图床中的图片格式
中括号小括号
后记
keep主题相关设置
设置标题、作者、url自定义logo、背景图片。开启百分比滚动条。添加个人联系方式。增加categories、links、about。开启文章预览。字数统计、作者标签。文章中代码可复制、启用左侧目录。开启文章最下方版权所有,开启全局搜索功能、开启rss订阅、cdn、慢加载功能。
更换电脑如何上传文章到GitHub
前期准备
新电脑需要安装git、hexo。并把旧电脑用户目录下.ssh文件夹内公钥和私钥复制出来到新电脑的用户目录的.ssh文件夹内。
具体步骤
创建myblog文件夹
|
|
右键git bush here。初始化git,会自动在/e/myblog目录内创建.git文件夹
|
|
测试笔记本到GitHub私有仓库的连通性。
|
|
添加信息
|
|
配置远端仓库并远程拉取源代码到本地
|
|
|
|
然后就可以修改文章,最后上传文章了。步骤见新文章上传流程。
报错信息
使用拉取源码到本地时,当本地的环境和远端环境中某些文件名字相同内容不同时,会出现远端部分文件拉取失败。此时只要删除提示中本地的文件,再次执行拉取命令即可。
|
|
清空github上私有仓库源代码,将本地重新创建好的博客源码上传到远端私有仓库。
github actions报错
需要重新创建博客源码文件夹,重复以下操作。
|
|
报错解决参考