github Pages + Hexo 博客搭建
前置知识:git 使用,github 建库
注意GitHub仓库最好建的是username.github.io仓库,这样GitHub Pages 才能获得一级域名。而二级域名在进行某些扩展时有问题。可以去搜一下关于github pages两种域名的区别。
安装环境
安装 node.JS
命令行运行node -v
npm -v
检查安装效果
安装 hexo
注意以下命令推荐使用字符支持良好的命令行,最好给管理员权限。我使用的是 git bash。
可以使用 cmd,但我遇到了中文问题。
powershell 运行会提示 “在此系统上禁止运行脚本”, 管理员权限下输入
set-executionpolicy remotesigned
更改安全策略,允许运行脚本。
运行npm install -g hexo-cli
进行安装,再运行hexo -v
检查安装效果,有版本信息即安装成功
配置项目
初始化
安装成功后自己创建一个项目文件夹,命令行切换到文件夹路径进行以下初始化:
运行hexo init
初始化
本地测试
运行以下命令部署默认网页进行测试:
1 | hexo new test_my_site #创建新 test_my_site 的 markdown 文件 |
观察到命令行在持续运行时,则可打开浏览器输入本地服务器地址(默认是localhost:4000
)访问试试看。
部署到网络
在文件夹根路径下面,找到_config.yml,打开修改
最后一段为:
1 | deploy: |
URL 小段为:
1 | # URL |
保存关闭该文件
安装 hexo 的 git
部署插件npm install hexo-deployer-git --save
运行以下命令进行发布到网络
1 | hexo clean |
在 hexo d 部署到 GitHub 时可能要求 GitHub 账号密码。
出现Branch 'master' set up to track remote branch 'master' from 'https:..
大概就恭喜你成功了。此时可以在
github 仓库看到 hexo
提交的文件。以及能通过访问网址查看你刚才发布的默认博客。
选一个你喜欢的主题
下载主题
挑选一个合适的主题,比如很常见的 Next,复制 git 地址,在本地博客项目根目录下,命令行输入进行 git clone
例如git clone https://github.com/next-theme/hexo-theme-next themes/next
如果使用 next 主题请注意, next 主题在 2020 之前是 theme-next 项目,2020 版本是 next-theme 项目,配置字段有点不同,根据需要选择。19 版本网上教程比较健全了。
配置主题
打开 _config.yml,修改 theme 字段:
1 | # Extensions |
其中主题也有自己的配置文件,项目名/themes/主题名/_config.yml,可以根据需要进行修改。比如 next 主题配置文件中,可以在四种风格中选一种,选一个取消注释就好了。想预览效果可以去找 next 官方文档。
1 | # Schemes |
输入hexo g;hexo d
重新生成网页并发布出去,可以自己偷偷欣赏欣赏。
如果没看到生效,可能是因为浏览器缓存,关掉浏览器重新打开,或者 Ctrl+F5 强制刷新。
hello,blog
让我们试着发布第一篇博客。项目路径下,命令行输入hexo n 博客名
, 可以在 项目名/source/_posts/ 下面找到新建的 markdown
文件。打开文件可以发现有预置的文件头,暂时不用管,后续要添加分类和标签功能的时候可以写一写。在文件头之后,即------
下面写入你的
markdown 格式内容即可。
关于 markdown 怎么书写,可以看我的 markdown 简洁手册。
参考
错误汇总
can not find module xxx
命令行npm install
安装所有依赖包完事。
没有启用代码高亮
根目录 config 里,修改配置如下:
1 | highlight: |
next 主题配置里,选择自己要的高亮样式:
1 | codeblock: |