Dark Angel

Hexo+Github的Blog搭建

次阅读
本文目录
  1. 安装:
    1. 一、安装Homebrew
    2. 二、安装node.js
    3. 三、安装Hexo
    4. 四、创建Blog Repository
    5. 五、购买域名
    6. 六、Deploy
  2. 优化
    1. 一、访问速度
    2. 二、RSS订阅
    3. 三、搜索支持
    4. 四、评论功能
    5. 五、分享功能
    6. 六、个人信息完善
  3. 写文章
  4. 写在最后

安装:

一、安装Homebrew

Mac上已经安装了ruby环境,只需要输入

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

二、安装node.js

sudo brew install node

三、安装Hexo

Hexo是基于node.js的博客系统,这里安装就可以了。

sudo npm install -g hexo 
npm install hexo-renderer-ejs --save
npm install hexo-renderer-stylus --save
npm install hexo-renderer-marked --save

安装完成后,找一个放blog的目录

cd ~/Blog

然后执行初始化

hexo init

然后可以直接预览hello word.md

hexo g
hexo s
=> [info] Hexo is running at localhost:4000/. Press Ctrl+C to stop.

g是generate, s是server,还有d是deploy(部署)推荐用首字母,方便快捷。

四、创建Blog Repository

在自己的Github创建Blog的仓库,如Blog-Hexo,命名无所谓。记住勾选README。

repository1

repository2
创建完毕,直接进行到下一步。

五、购买域名

推荐在万网购买,国外的Godaddy也可以。以万网为例:
买好域名实名认证了之后,到控制台 - 云解析DNS中添加一个解析,如:

CNAME映射到自己的xxx.github.io。这里的xxx是你的在github的名称,我的是DarkAngel7
在终端中输入

dig blog.darkangel7.com +nostats +nocomments +nocmd

如果出现下面的结果,证明解析成功。

DarkAngel-MacBook-Pro-2:Blog DarkAngel$ dig blog.darkangel7.com +nostats +nocomments +nocmd

; <<>> DiG 9.8.3-P1 <<>> blog.darkangel7.com +nostats +nocomments +nocmd
;; global options: +cmd
;blog.darkangel7.com.        IN    A
blog.darkangel7.com.    30    IN    CNAME    darkangel7.github.io.
darkangel7.github.io.    2516    IN    CNAME    github.map.fastly.net.
github.map.fastly.net.    30    IN    CNAME    prod.github.map.fastlylb.net.
prod.github.map.fastlylb.net. 30 IN    A    151.101.100.133

六、Deploy

上一步完成域名到github pages的单向映射。本步完成github到域名的映射,完成输入域名解析到对应的内容。

首先在Blog/source里创建CNAME

cd source
touch CNAME
vi CNAME

输入你在上一步CNAME的域名,建立映射关系。

blog.darkangel7.com

修改_config.yml文件,配置一些东西。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
      type: git
      repository: git@github.com:DarkAngel7/Blog-Hexo.git

安装git插件

npm install hexo-deployer-git --save

这里repository的地址可以是https的,也可以是git的,只不过git需要SSH证书,一般用https就可以了,如果出现443错误,替换成git。

然后在Blog目录下

hexo g -d

生成静态文件并且部署出去,不出意外,已经可以外网访问了。

优化

一、访问速度

由于Google被墙,大部分主题中引用的jquery都会因为超时(可以Blog目录下搜索google),而造成页面访问很慢,这里需要将jquery改为百度的

<script src="//apps.bdimg.com/libs/jquery/2.0.3/jquery.min.js"></script>

二、RSS订阅

输入命令

$ npm install hexo-generator-feed --save

然后在_config.yml中,添加

rss: /atom.xml
feed:
     type: atom
    path: atom.xml
     limit: 20

三、搜索支持

现在在百度和Google是搜不到你的网站的,为了让搜索引擎搜索到,需要做一些工作。

搜索引擎入口

添加sitemap.xml:

首先输入:

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save    
npm install hexo-baidu-url-submit --save

前两个插件用于生成sitemap,后一个插件用于主动推送链接到百度(防止百度爬虫抓取失败,导致百度搜不到您的博客,这里有一篇关于百度无法爬取Github Pages静态网站解决方案)。

然后在_config.yml文件中添加

sitemap:
         path: sitemap.xml
baidusitemap:
         path: baidusitemap.xml

## BaiduUrlSubmit: http://hui-wang.info/2016/10/23/Hexo插件之百度主动提交链接/    
baidu_url_submit:        ##主动推送新文章到百度
  count: 3 ## 比如3,代表提交最新的三个链接
  host: blog.darkangel7.com ## 在百度站长平台中注册的域名
  token: your_token ## 请注意这是您的秘钥, 请不要发布在公众仓库里!
  path: baidu_urls.txt ## 文本文档的地址, 新链接会保存在此文本文档里

##同时要检查这里有没有URL值,必须包含是百度站长平台注册的域名,比如 
# URL
url: http://blog.darkangel7.com
root: /
permalink: :year/:month/:day/:title/

##最后,加入新的deployer,如
deploy:
- type: git
  repository: git@github.com:DarkAngel7/Blog-Hexo.git
- type: baidu_url_submitter  ## 百度链接主动推送

先验证网站所有权,下载html,mv到Blog/themes/yourtheme/source目录下,执行

hexo g -d

验证成功后,添加百度自动推送脚本,最好在head.ejs中添加百度自动推送的代码,至于head.ejs文件位置,在你使用的theme文件夹下搜索吧。
谷歌的话,在抓取-站点地图里面添加就好。

这样主动推送与自动推送结合,能很好的提高您文章的曝光率。

四、评论功能

可以使用多说来提供评论功能。首先,在_config.yml文件中添加

# Duoshuo
duoshuo_shortname: yoursite.doushuo.com

然后,搜索themes文件夹下,你使用的theme文件目录下的commemt.ejs(不同的theme可能位置不同,请自行寻找)。修改如下:

 <div id="comment" class="comments-area">
     <% if(config.duoshuo_shortname) { %>
     <! -- 多说的代码 --> 
     <% } %> 
</div>    

 如果报关于data-thread-key的错误,则改成下面这样:
 <div class="ds-thread" data-thread-key="<%= page.path %>" data-title="<%= page.title %>" data-url="<%= page.permalink %>"></div    >

五、分享功能

可以在Blog目录下搜索post/share,一般在article.ejs文件中,或者post.ejs文件中,然后替换

<%- partial('post/author') %>

百度分享提供的代码。

六、个人信息完善

网站的信息一般都在Blog/_config.yml中修改。

关于Theme,去官方提供的主题列表中选个现成的,按照里面的方法pull下来,如light主题

$ git clone git://github.com/tommy351/hexo-theme-light.git themes/light

然后在_config.yml配置文件中设置:

theme: light

关于主题的优化,一般在themes/yourtheme/_config.yml中配置。

写文章

在Blog目录下,创建

hexo new 文章题目

然后用Markdown编写,写好后save。

hexo g
hexo s

生成,然后在本地localhost:4000预览一下,如果没有问题,就可以发布了。

hexo d

所有的文章都是放在Blog/source/_posts/目录下的,可以随时编辑修改。

写在最后

还有一些其他的修改,这里就不一一提了,等待你慢慢发现。现在快开始写作吧~~

Dark Angel

iOS界的低调探索者

 
Powered By Hexo