通过Hexo在GitHub搭站全记录

本人github主站:https://anonymalias.github.io
本人csdn主站:http://blog.csdn.net/anonymalias
GitHub本身支持建站:只需在自己的repos下建立一个名为:username.github.io的repo,然后在该repo下发布静态站点文件可以了。
下面是详细的在linux下建站流程:

1.Hexo的安装

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
Hexo的安装依赖:

  • Nodejs
  • Git
    ubuntu下直接:
$sudo apt-get install nodejs
$sudo apt-get install git 

这里还需要安装npm(Node Package Manager),是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准, 例如redhat的rpm, vim的vimball, python的pip等等。
ubuntu下直接:

$sudo apt-get install npm 

这个时候就可以通过npm来安装hexo了

$ npm install -g hexo-cli

2.创建Hexo站点工程

Hexo 安装完之后,就可以通过hexo来创建建站所需要的工程和配置文件。

$ hexo init homepage
$ cd homepage
$ npm install

创建完之后,homepage下面生成的目录结构如下:

_config.yml     #主站的配置文件
.git  .gitignore  .gitmodules   #npm安装过程需要在线拉取远程库 
node_modules  
package.json    #应用程序的信息
scaffolds       #模版文件夹,新建文章时会根据 scaffold里对应md生成文件
source          #存放用户资源,除 _posts 文件夹之外, _ 开头的文件/和隐藏的文件将会被忽略
themes          #主题文件夹

其实这个时候可以直接在homepage目录下执行hexo g命令生成public目录,该目录是已经生成的可以发布的静态站点,里面有一篇默认的hello world博客。把public目录的所有文件push到自己github的username.github.io repo中就可以通过username.github.io域名进行访问了

3.Hexo站点配置

上面创建的站点homepage目录下的_config.yml是站点的全局配置文件,非常重要的。这里所以下该配置文件需要进行配置的地方

# Site
title: Hello World!                     #站点标题
subtitle: welcome to my code home!      #站点副标题
description: attitude is everything     #站点描述
author: anonymalias                     #作者名字
email: anonym_alias@163.com 

#URL
url: https://anonymalias.github.io      #站点的地址

这里还要注意的就是站点配置文件中的Directory相关配置,虽然不用修改,但创建文章的时候会用到这几个目录:

# Directory
tag_dir: tags           #标签文件夹
archive_dir: archives       #归档文件夹
category_dir: categories    #分类文件夹

这几个目录在创建文章时基本都需要添加在head中的,以便很方便读者浏览博客。

Hexo默认的主题landscape存放在所创建的homepage的themes/landscape下面,每次要使用新的主体,都是在homepage/themes目录下创建。
这里先不修改主题的配置文件,主体配置文件路径名为:thems/landscape/_config.yml,因为这里不影响使用。

4.创建文章

站点创建和配置好之后,就可以开始写文章了。首先是通过hexo new命令创建文章对应的md文件。

$ hexo new title

执行上述命令后,会在source/_posts/下面生成对应的title.md,例如:

$hexo new github-cowork-process 
$ls source/_posts
github-cowork-process.md  hello-world.md

到这里就可以将自己的文章内容写入生成的title.md文件中,然后通过md的语法对文章内容进行排版修饰。这里要注意生成的md文件开头的结构:

---
title: github-cowork-process
date: 2016-01-16 15:15:00
tags:
---

这里要修改—之间的内容:

---
title: 此处填写博客的标题
date: 2016-01-16 15:15:00
tags: github 
categories: technology_common
---

这里的配置会将创建的文章加入到blog的对应的分类索引中,以便查看和检索。这个标题的模版可以在scaffolds/post.md文件中进行修改,这样创建文章时只需要修改对应的值就可以了,而不需要手动添加对应的标签。

一般文章都会有很多图片资源,最简单的方法是把所有的图片资源存放在source/images文件夹下面,然后然后通过类似于 ![](/images/image.jpg) 的方法访问它们。我觉得这个方法是够用了,因为这种最简单的方法也方便进行图片管理。当然hexo还提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的下面选项打开:

#_config.yml
post_asset_folder: true

当资源文件管理功能打开后,Hexo将会在你每一次通过 hexo new [layout] title 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个 markdown 文件一样的名字。具体可参考官方链接:资源文件夹

很多人搭建论坛会用到qiniu的存储,这里我没有采用是因为觉得第三方的服务不太可靠,毕竟写一个博客,没有必要接入。

5.生成站点静态资源

完成了title.md文件的编写之后,就可以在站点目录通过hexo g命令生成要发布博客的所有静态资源。hexo g命令会在站点跟目录下创建pulibc目录,public下生成的是本站点所需要的所有的静态资源html,js,css。

$ hexo g
INFO  Files loaded in 696 ms
INFO  Generated: scroll2top/scrollup.png
INFO  Generated: scroll2top/scroll2top.js
INFO  Generated: js/script.js
INFO  Generated: fancybox/jquery.fancybox.pack.js
INFO  Generated: fancybox/jquery.fancybox.js
INFO  Generated: fancybox/jquery.fancybox.css
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO  Generated: fancybox/helpers/jquery.fancybox-media.js
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO  Generated: fancybox/helpers/fancybox_buttons.png
INFO  Generated: fancybox/fancybox_sprite@2x.png
INFO  Generated: fancybox/fancybox_sprite.png
INFO  Generated: fancybox/fancybox_overlay.png
INFO  Generated: fancybox/fancybox_loading@2x.gif
INFO  Generated: fancybox/fancybox_loading.gif
INFO  Generated: fancybox/blank.gif
INFO  Generated: css/style.css
INFO  Generated: css/images/jr0cket-banner-dual-clojure.png
INFO  Generated: css/images/banner.jpg
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: images/github_co_work_1.png
INFO  Generated: 2016/01/14/hexo-construct-homepage/index.html
INFO  Generated: 2016/01/13/hello-world/index.html
INFO  Generated: 2016/01/12/github-cowork-process/index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2016/index.html
INFO  Generated: archives/2016/01/index.html
INFO  Generated: categories/technology-common/index.html
INFO  Generated: index.html
INFO  35 files generated in 1.7 s

这个时候就可以算完成了所有的工作,只需要将public目录下所有文件,上传到username.github.io的repo库中,通过username.github.io就可以访问个人主页了。我一开始做法是:

$git clone git@github.com:anonymalias/anonymalias.github.io.git
$ cp -R ~/homepage/public/* ./
$ git add -A
$ git commit -m ‘xxx’ .
$ git push

6.一键站点发布

每次编写文章,更改站点配置,都要把hexo g生成的public的全部内容手动上传到username.github.io的repo库中。这个操作是很繁琐的,但hexo牛逼的是它自带发布功能。
此功能需要对全局站点配置文件_config.yml进行修改:

deploy:
  type: git 
  repo: git@github.com:anonymalias/anonymalias.github.io.git 
  branch: master
  message: update_homepage

Repo的地址需要用支持ssh协议的url,这里配置好后,还要配置github的无密登录,这个是老生长谈的事了,首先是生成rsa公私钥,然后将公钥上传到github的repo上面就可以了。这里写图片描述

所有都ok后,发布只需要执行hexo d命令就ok了!!!

7.评论系统

我们借助hexo搭建的网站是一个静态的站点,如果我们希望加入一些动态的功能,就需要借助外部服务,这里我们最最需要的就是搭建一个评论系统,强大的是hexo提供评论服务的接入,强大吧!!!,这里我们使用hexo默认建议使用的disqus评论服务,虽然国内duoshuo使用的人较多,但是其服务有时候很不稳定,容易出bug(国产总是这么不可靠~~~)。

接入disqus,首先到官网https://disqus.com创建个人账户,然后为个人站点添加disqus功能,站点注册界面如下:这里写图片描述

图中1表示要接入的站点的域名,2标识和1中站点名一一对应的disqus url, 2中输入的名字是一个shortname,这个shortname在主站的配置文件中要使用。注册完成后。进行下面配置:依次点击disqus主站上头像设置里的admin->setup->Basic:这里写图片描述

进入管理页面后,在Basic页签中下滑找到guest commenting选项进行勾选,允许guest进行评论。这里写图片描述

这个时候就可以对hexo的主站点文件_config.yml进行修改,添加自己disqus的shortname:

disqus_shortname: anonymalias

配置好之后,就可以发布了,这时候评论系统就ok了。

8.写在最后

这里博客就算搭完了,博客的基本功能都有了,也加上了最重要的评论系统.这里写图片描述

至于站点的页面优化呀,可以在后面有时间进行优化。至于站点的流量统计可以使用google或者baidu的,站内搜索可以使用swiftype,这些有时间在后面加上。至于其他的例如qiniu云存储没有必要接入,本来第三方就不可靠,免费的就更不可靠,博客也没必要接入,以后再看吧。

9.参考

  1. Hexo主站:https://hexo.io/zh-cn/docs/
  2. Hexo主题:https://github.com/hexojs/hexo/wiki/themes
  3. Markdown语法:http://www.markdown.cn/
  4. 百度流量统计:http://blog.justforfun.top/2015/02/06/hexo-%E6%B7%BB%E5%8A%A0%E7%99%BE%E5%BA%A6%E7%BB%9F%E8%AE%A1/
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值