hexo 和 Github 搭建个人博客记录

所需准备

创建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.

  1. 打开Github_setting_key页面,新建 new SSH Key

  2. Title任意, 将密钥从C:\\users\"your name"\.ssh\id_rsa.pub中复制过来, 点击Add SSH Key

  3. 在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 设置中将 menuabout 前面的注释去掉即可。


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.ymlfooter字段中添加代码


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/之上,省却了重复生成并部署网站的操作.

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,376评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,126评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,966评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,432评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,519评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,792评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,933评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,701评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,143评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,488评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,626评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,292评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,896评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,324评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,494评论 2 348

推荐阅读更多精彩内容