我的一小步 | 如何搭建私人博客
Hexo简介
Hexo是一款基于Node.js的静态博客框架,快速、简洁且高效,支持markdown语法。
step0:准备环境
- 准备git、node.js环境
- git官网:https://git-scm.com/downloads
- Node.js官网:https://nodejs.org/en/download/
Windows环境配置:使用 Node.js 官方安装程序时,需要确保勾选 Add to PATH 选项(默认已勾选)
- 如已完成安装,可通过如下命令验证:
npm -v
、git -v
step1:本地安装Hexo
使用命令行,一键安装
1 |
|
step2:初始化并验证Hexo
- 初始化当前文件夹并生成必要文件
1 |
|
- 生成的文件夹结构如下
1 |
|
- 三连生成Hexo预览
1 |
|
- 在浏览器地址栏输入
localhost:4000
,即可本地预览Hexo博客界面啦~
step3:部署到GitHub
👀要想实现其他小伙伴通过一根网线访问你的博客,有两种办法。
一是部署到服务器,再通过DNS解析到服务器即可;
二是借助Severless服务,在代码托管网站上托管自己的静态页面。
根据是否有自己的服务器做选择。
更多Severless服务的相关内容,可见👉Serverless | 技术分享
这里介绍托管到Github平台的方法:
- 确认自己已注册Github账户
- 新建仓库:
<username>.github.io
- 留意仓库的分支,是
master
还是main
,后面配置GitHub deploy会用到 - 测试是否成功:仓库内新建
index.html
文件,随便写入内容,浏览器输入地址<username>.github.io
访问,如出现写入的内容则畅通了 - 安装git部署的插件
hexo-deployer-git
,并配置git密钥
1 |
|
之后将密钥的内容复制到GitHub的SSH Keys即可
如本机无git密钥,可通过以下路径生成:
1 |
|
- 把网页部署到GitHub平台:打开根目录的
config.yml
文件,定位到deploy:
,写入GitHub的部署路径
1 |
|
step4:开始写作
Hexo支持markdown语法写作,写文章的方法有两种:
- 使用命令创建文章:
hexo new <filename>
- 在文件夹
./source/_posts
内新建<filename>.md
文件
特别注意:文件夹
./public
是GitHub的同步文件夹,每次Hexo三连都会被覆盖、更新,勿在此文件夹内新建任何文件!!(别问我是怎么知道的🤣🤣)
进行到以上四步,基本可以实现发布博客的功能了。如要进阶的操作,可继续往下阅读。
P.S 因为众所周知的原因,国内访问GitHub不便,网络有时也不畅通,所以建好站后多半还访问不了,详见step7
进阶操作
step5:美化你的网站
Hexo上现有300+的主题,推荐主题zhaoo(本站建站初使用的主题即是zhaoo),可根据自己的需求调整为喜欢的风格
安装主题
1 |
|
启用主题
打开根目录的_config.yml
文件,定位到theme:
栏,把值改为zhaoo
,注意冒号后需一个空格,否则会报错
更新主题
1 |
|
修改主题
详见👉step9
小技巧分享:
在根目录新建_config.<主题名>.yml
文件(如_config.zhaoo.yml
),可对主题的配置进行更改,其被执行的优先级高于主题文件夹内的_config.yml
文件
step6:绑定自己的域名
绑定域名分三步走:
- 前往域名绑定的DNS解析服务商处
- 把需要绑定的字段(如
blog.wuzhiping.top
)用CNAME
的方式转发到GitHub生成的连接(<username>.github.io
) - GitHub也需要设置,路径为
Settings
-Pages
-Custom domain
,把上面的链接填入
注:按上述方法,GitHub会自动帮你在根目录创建一个CNAME文件,但每次
hexo d
部署后,文件会被清除,因此,这里的做法是在本地文件夹的根目录新建一个CNAME文件,内容写你填入的网址,如blog.wuzhiping.top
step7:实现国内的顺畅访问
秘密武器就是Coding平台
Coding目前已被腾讯收购,开发者可免费使用代码托管、开发协作等功能。
Coding是一个面向开发者的云端开发平台,提供 Git/SVN 代码托管、任务管理、在线 WebIDE、Cloud Studio、开发协作、文件管理、Wiki 管理、提供个人服务及企业版本的服务。
——官网介绍
- 导入设置的路径是
新建项目
-代码仓库
-创建代码仓库
-导入外部仓库
,把GitHub的仓库导入进去 - 和GitHub类似,添加SSH Key,通过命令
ssh -T git@e.coding.net
测试是否通过 - 修改站点
_config.yml
配置文件,加入coding的代码
1 |
|
- 部署Hexo静态网页文件
- Hexo一键三连见step2
- 此时
Coding
会自动部署,可在仓库的网站托管
页面看到给定的网址(很长,建议绑定自己的域名) - 配置
Coding
(背后的腾讯云)提供的CDN服务,实现国内的加速访问,前六个月免费体验
🎊小彩蛋:
此外,还有Vercel
、Cloudflare Pages
等平台(Gitlab
也可部署,缺点是必须是登录用户才能访问生成的网页,不推荐使用;Gitee 码云
也可托管,Pages功能目前处在整顿期 ),部署的过程类似于Coding
国内CDN另一个选项是又拍云,加入又拍云联盟
,每月纵享15G流量,还是很香的…
step8:异地备份源文件
hexo d
的机制是把编译后的静态页面上传到代码托管网站,不包含源文件,因此,为了文件备份,也为了方便远程编译,可以利用git的不同分支管理源文件。
- 在GitHub上新建分支
source
,确认已配置本地的SSH Keys - 本地git库的操作
1 |
|
- 同步远程仓库
1 |
|
step9:小插曲
参照zhaoo的主题配置文档以及Hexo官方文档进行个性化设置
同时,增加了以下几点的内容。
引入iconfont
阿里巴巴矢量图标库
新建项目➡把中意的图片加入到我的项目
➡复制Font class
代码➡在主题的配置文件找到css导入➡把网址如图存放进去,完成导入。
以后就可以直接用iconfont项目内的图标了,还可以自定义图标的颜色~
1 |
|
安装博文压缩插件hexo-neat
1 |
|
同样在_config.<themename>.yml
中修改配置,具体配置可参考👉rozbo/hexo-neat
设置首页背景图为轮播
原理是引入unsplash的图片源进行轮播,每次打开都是新的背景图。
修改主题配置文件_config.<themename>.yml
,定位到preview
,修改api:
的内容
1 |
|
修改页脚内容及排版
找到主题的布局文件夹,编辑页脚源文件:…\layout_partial\components\footer.ejs,从<footer class="footer">
那一行起,依次增加了项目支持
、网站访问统计
、CC协议图标
的内容
点击查看代码
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!---cc-icons代码引入--->
<link rel="stylesheet" href="/css/cc-icons.min.css" type="text/css" />
<!---cc-icons代码引入--->
<!---busuanzi代码引入--->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<!---busuanzi代码引入--->
<!---fontawesome代码引入--->
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!---fontawesome代码引入--->
<%
var socialList = '';
for (var i in theme.social) {
var arr = theme.social[i].split('||');
var url = arr[0];
var iconfont = arr[1];
var color = arr[2] || theme.color.link;
socialList +=
`<a
href="${url}"
target="_blank"
class="footer-social-item"
onMouseOver="this.style.color=${color}"
onMouseOut="this.style.color='${theme.color.text}'">
<i class="iconfont ${iconfont}"></i>
</a>`;
}
%>
<footer class="footer">
<div class="footer-social"><%- socialList %></div>
<% if (theme.copyright) { %>
<div class="footer-copyright"><%- theme.copyright %></div>
<% } %>
<!---添加项目支持--->
<p>
<div align="center">
基于 <a target="_blank" href="https://hexo.io">Hexo</a> & Theme.<a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a> | <a rel="upyun" target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" p-id="38"><img src="/images/icons/upyun_logo8.png" width="10%" height="10%" style="transform:translateX(-2px);position:relative;margin-bottom:2px;" title="又拍云CDN"></a>加速支持
</div>
</p>
<!---添加项目支持--->
<!---网站访问统计--->
<p>
<div align="center">
<i class="iconfont icon-eye" aria-hidden="true"></i>
<span id="busuanzi_value_site_pv">
<i class="fa fa-spinner fa-spin" aria-hidden="true">
</i>
</span>   
<i class="iconfont icon-user" aria-hidden="true"></i>
<span id="busuanzi_value_site_uv">
<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
</span>
</div>
</p>
<!---网站访问统计--->
<!---添加CC协议--->
<div align="center">
<a target="_blank" title="CC协议"href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">
<i class="cc cc-by-nc-sa" aria-hidden="true" style="font-size:36px;"></i>
</a>
</div>
<!---添加CC协议--->
</footer>
尚待解决
本条目记录尚待解决的问题。
- 自定义摘要内容,在页面md文档的
Front-matter
自定义description:
,无效。
Note: 通读主题的模板配置源文件,发现解决方式为在Front-matter
中新增excerpt:
的内容 - 调整页面大小,试过了调整主题配置的
post_page_size:
,无效 - 去除页脚的微信图标,试过删除主题配置文件的微信图标代码,无效
Ref
Changelog
- 210720 搭建文章框架,完成初稿
- 210729 扩充网站搭建的基础部分
- 210730 扩充进阶部分的内容,发布完整版
- 本文作者:米斯特乌
- 文章标题:我的一小步 | 如何搭建私人博客
- 本文链接:https://m.wuzhiping.top/p/ddb3eb57.html
- 版权声明:博客内容采用 BY-NC-SA 4.0 许可协议,转载请注明出处!