所需准备
创建Github个人仓库
注册Github账号,并点击Github中New repository
建立新仓库,仓库名为: 用户名.github.io
安装并配置Git
在Git官网下载安装包,安装后在命令行下输入git
检测是否安装成功。
打开Git Bash
, 输入以下命令配置用户名和邮箱信息
git config --global user.name "Github用户名"
git config --global user.email "Github注册邮箱"
生成ssh密钥文件
ssh-keygen -t rsa -C "Github注册邮箱"
然后其他选项默认。
设置Github中的密钥,和电脑上的密钥配对,即可在电脑上使用Git管理Github.
打开Github_setting_key页面,新建
new SSH Key
Title任意, 将密钥从
C:\\users\"your name"\.ssh\id_rsa.pub
中复制过来, 点击Add SSH Key
在Git bash中输入
ssh git@github.com
检测是否设置成功
安装Node.js
直接下载Node.js for windows, 并在安装时注意将环境变量和npm装上.
检测是否安装成功, 在命令行输入node -v
以及npm -v
即可
安装hexo
任意位置新建一个名为Blog
的文件夹(可以是其他任意的英文), hexo框架以及之后发布的网页都将安装到这个文件夹中。
进入Blog
文件夹,启动命令行,用npm安装hexo
npm install -g hexo-cli
安装好后初始化
hexo init blog
随后即可用hexo的各项命令制作静态网页了.
发布网站
在blog根目录中_config.yml文件里修改
deploy:
type: git
repo: 仓库的完整路径.git
branch: master
最后在Git中安装部署插件, 输入命令
npm install hexo-deployer-git --save
即可使用命令hexo d
来发布网站了。
绑定个人域名
可在域名提供商处购买域名,在国内用DNSpod解析。
先在source\post\
文件夹下新建文件CNAME
,文件名一定要大写,没有后缀名. 用编辑器打开该文件后输入刚申请的域名YourDomain.com
.
在DNSpod的操作页面中添加两条域名解析记录
@ CNAME YourUserID.github.io
www CNAME YourUserID.github.io
等候10分钟,即可用域名YourDomain.com
打开个人博客.
一些小问题
不能生成categories和tags
需要用命令hexo new page categories
来生成categories页面.
Hexo 将MathJax中的某些命令渲染错误
解决方法是换一个Hexo的引擎, 使用以下命令
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save
注意,前提是电脑中安装了Pandoc
中英文之间需要手动打空格
可以用Next的名为pandu
的插件自动生成空格,具体使用方法参见pangu_github
如何引用站内的博文
可以用hexo3.0引入的Render Pipeline Changed特性在所要引用的地方,输入以下代码
{% post_path hello-world %}
// /2015/01/16/hello-world/
{% post_link hello-world %}
// <a href="/2015/01/16/hello-world/">Hello World</a>
{% post_link hello-world Custom Title %}
// <a href="/2015/01/16/hello-world/">Custom Title</a>
{% asset_path example.jpg %}
// /2015/01/16/hello-world/example.jpg
{% asset_link example.jpg %}
// <a href="/2015/01/16/hello-world/example.jpg">example.jpg</a>
{% asset_link example.jpg Example %}
// <a href="/2015/01/16/hello-world/example.jpg">Example</a>
{% asset_img slug %}
// <img src="/2015/01/16/hello-world/example.jpg">
注意引用博文时,若博文的标题中有自动生成的时间,则只需要将hello-world
换成博文的title
即可,不需要加时间.
创建about页面
新建一个 about
页面:
hexo new page "about"
菜单显示 about
链接,在主题的 _configy.yml
设置中将 menu
中 about
前面的注释去掉即可。
menu:
home: /
archives: /archives
tags: /tags
about: /about
用Busuanzi统计访问量
注意在Next 5.01以上版本中已经内置有Busuanzi,只需在主题配置文件打开即可。 参看说明
在主题的themes\next\layout\_partial\footer.swig
中添加如下代码
{% if theme.footer.busuanzi.enable %}
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
{% endif %}
添加后Busuanzi就可以统计网站流量了.
在网站主页显示访问人数,同样在刚才的文件中添加如下代码
{% if theme.footer.busuanzi.enable %}
<span id="busuanzi_container_site_uv">
曾有<span id="busuanzi_value_site_uv"></span>人大驾光临
</span>
{% endif %}
这段代码按pv方式统计,每一次点击都算一次访问.若按uv方式统计,即一个用户不管多少次点击都算一次访问,将代码中pv改成uv即可.
最后若想激活效果,在themes\next\_config.yml
的footer
字段中添加代码
busuanzi:
# busuanzi analysis
enable: true
文章字数统计
使用插件hexo-symbols-count-time
来统计文章字数,参见文档
首先安装插件
npm install hexo-symbols-count-time --save
随后在Hexokinase配置文件中添加字段
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
最后在NexT主题的配置文件中找到配置
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4
wpm: 275
配置好即可.
如何让Google和Baidu可以搜索到网站
可以参见教程
解决FontAwesome访问太慢的问题
可以用国内的CDN
在Next的Config文件中找到fontawesome:
一栏,然后将对应的版本替换就好.
注意,上述的CDN替换可能导致加载图片出错的问题。
使用MathJax时,如何让长公式自动断行?
在themes\next\layout\_third-party\math\mathjax.swig
文件中添加如下代码
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
CommonHTML: { linebreaks: { automatic: true } },
"HTML-CSS": { linebreaks: { automatic: true } },
SVG: { linebreaks: { automatic: true } }
});
</script>
具体参见官方文档
Hexo s 的妙用
在调整hexo网站时,可以在终端运行hexo s
命令。此时hexo会自动将你所作的更改显示到http://localhost:4000/
之上,省却了重复生成并部署网站的操作.