折腾了一天,终于搞定了自己的个人博客网站。
其实也不是说建立多难,只是想要好看、好用啥的。

github 建立个人博客仓库

仓库名: 用户名.github.io
例: lansm.github.io

安装git

  • 安装成功后,将Git与GitHub帐号绑定设置user.name和user.email配置信息
  • 生成ssh密钥文件,直接三个回车即可,默认不需要设置密码
  • 找到生成的.ssh的文件夹中的id_rsa.pub密钥,将内容全部复制,打开GitHub_Settings_keys 页面,新建new SSH Key
  • 在Git Bash中检测GitHub公钥设置是否成功
1
2
3
4
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"
ssh-keygen -t rsa -C "你的GitHub注册邮箱"
ssh git@github.com

安装Node.js

检测Node.js是否安装成功 node -v
检测npm是否安装成功 npm -v

安装Hexo

建立文件夹存放Hexo框架与以后你自己发布的网页
通过命令行进入文件夹(或者文件夹中shift+右键
安装Hexo

1
npm install -g hexo-cli 

初始化博客

1
hexo init blog

为了检测我们的网站雏形,分别按顺序输入以下三条命令:

1
2
3
hexo new test_my_site
hexo g
hexo s

新建一篇博客文章+生成网页+在本地预览
默认本地服务地址 : localhost:4000

将我们的HexoGitHub关联起来,打开站点的配置文件_config.yml(自己建立的根目录下),翻到最后修改为:

1
2
3
4
deploy:
type: git
repo: #这里填入你之前在GitHub上创建仓库的完整路径,记得加上 .git
branch: master

上面是给hexo d 做相应配置,让hexo知道你要把blog部署在哪里

安装Git部署插件

1
npm install hexo-deployer-git --save
1
2
3
hexo clean 
hexo g
hexo d

hexo d 就是部署网站命令,d是deploy的缩写。
完成后,打开浏览器,在地址栏输入你的放置个人网站的仓库路径,即 用户名.github.io
例: lansm.github.io

到这里其实已经完成博客的框架搭建,可以自行探索了
但是为了更简单+更美观: 选择HEXO主题安装

安装配置主题

以本站主题为例:

1
git clone https://github.com/Sariay/hexo-theme-Annie.git

将站点目录下的_config.yml文件中的theme字段修改为Annie
确保themes目录下存在名为Annie的文件夹(或hexo-theme-Annie

其它说明

其它问题解决

关于网站统计问题

我自己在配置百度统计的时候直接放上去ID是没有反应的,获取不到,不知道为什么
最后解决方案是寻找网站html页面模版,在\layout\_partial找到footer.ejs
查看里面的统计模块我直接在busuanzi下面照葫芦画瓢加了一行
<%- partial('plugin/statistics', {type: 'baidu-analysis'}) %>
然后按\plugin\statistics找到不同统计设置文件,直接在里面增加自己的百度统计ID。
百度统计的代码获取中有一行hm.src = "https://hm.baidu.com/hm.js?a087f930b192cdc0461708562e128e6b";其中hm.js?后面的就是自己的百度统计ID
(类似的问题也可以这样尝试自己解决)

关于域名解析后开启CDN加速问题(阿里云)

域名解析按照上面链接食用即可,关于CDN加速,阿里云内都有详细介绍,如:如何配置CNAME?
很坑爹的是阿里云里面的动态加速不要开!不要开!不要开!
我一打开它就页面重定向过多报错,找了老久才发现原因。
后面的HTTPS配置,阿里云可以免费申请SSL证书,详情:如何配置HTTPS?
不用阿里云的也差不多,配置证书方式可能不一样,
不使用证书的话浏览器地址栏左侧可能会提示你该网站不安全,
有的甚至还会在打开网页的时候必须手动点击来确认打开(比如谷歌)

网站根目录有些文件需要排除出渲染覆盖范围

在站点配置文件 _config.yml 中进行修改
注意排除的是 /source/ 文件夹下需要排除的文件:
(最好是将不需要被访问的都屏蔽)

1
2
3
4
5
6
7
#directory
skip_render:
- README.md
- CNAME
- baidu_verify_XXXXXXXXXX.html #下载的文件名
- googlexxxxxx.html #下载文件名
- #上面 Baidu 和 Google 是用于站点收录的

部分Markdown语法渲染出错

我自己学习写Markdown的时候使用的是VNote编辑器来写的
在它的默认渲染下脚注表情等等显示很正常,但是问题来了
部署到服务器上后,网页上的脚注就是显示不正常,总是会被解析成超链接
搜了半天超链接和都是没有用的,最后想到编辑器有选择渲染器的选项栏
拨云见日=-=,npm官方hexo-renderer-markdown-it插件

最后建议还是不用这些工具,慢慢写着就记住了一些md语法

推广链接