Github Pages+Hexo搭建个人博客

一直想有个美美的博客,CSDN实在无法满足。看了一些大神的 github 博客,非常艳羡,自己学着搭了个,看在它这么好看的份上,我也会坚持写写写!

为什么用Github Pages + Hexo

Github Page优点

  • 轻量级的博客系统,没有麻烦的配置
  • 使用标记语言,比如Markdown
  • 无需自己搭建服务器
  • 根据Github的限制,对应的每个站有300MB空间
  • 可以绑定自己的域名

Github Page有两种page模式,User/Organization Pages(个人或公司站点)和Project Pages(项目站点)。这里我们用的是user/Organization Pages,要求使用自己的用户名,每个用户名下面只能建立一个,资源命名必须符合这样的规则username/username.github.com,主干上内容被用来构建和发布页面

Hexo优点

  • 用于搭建博客网站框架,可以简单实现优美的博客网站;
  • 在本地端搭建,就可脱机查阅;
  • 架构不依托于其他门户网站,不再担心门户网站倒闭,不担心博文丢失或难以导出;
  • 博文为markdown格式,通用,容易上手,便于快速书写;
  • 可部署在github上;
  • 创造者来自中国台湾,所以几乎所有模板都关注到了中文的兼容性,很适合使用汉语的码农。

搭建步骤

新建github repository

在github上新建repository,name为username.github.io。

Hexo安装

先安装git和node.js

brew install git
brew install node
验证是否安装成功
node -v
npm -v
安装Hexo
npm install -g hexo #-g表示全局安装, npm默认为当前项目安装

Hexo部署

新建文件夹并打开,在文件夹内操作。

 hexo init #新建博客目录
 hexo g #根据当前目录下文件生成静态网页
 hexo s #启动服务器

现在就可以到浏览器输入localhost:4000查看啦。

简单介绍一下文件目录

  • public:执行hexo generate命令,输出的静态网页内容目录
  • scaffolds:layout模板文件目录,其中的md文件可以添加编辑
  • scripts:扩展脚本目录,这里可以自定义一些javascript脚本
  • source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
  • drafts:草稿文章
  • posts:发布文章themes:主题文件目录
  • config.yml:全局配置文件,大多数的设置都在这里
  • package.json:应用程序数据,指明hexo的版本等信息,类似于一般软件中的 关于 按钮

Hexo复制主题

 hexo clean
 hexo g
 hexo s
 git clone https://github.com/cnfeat/cnfeat.git themes/jacman

启用主题

修改Hexo目录下的config.yml配置文件中的theme属性,将其设置为jacman。

theme: jacman #或你的主题名,注意冒号后有一个空格

注意:Hexo有两个config.yml文件,一个在根目录,一个在theme下,此时修改的是在根目录下的。

更新主题

 cd themes/jacman
 git pull

注意:为避免出错,请先备份你的_config.yml 文件后再升级

Hexo本地调试

 hexo g #生成
 hexo s #启动本地服务,进行文章预览调试
 hexo d -g #或者直接作用组合命令

浏览器输入localhost:4000,即可查看搭建效果。每次变更config.yml 文件或者上传文件都可以先用此命令调试。

Hexo部署到github

npm install hexo-deployer-git --save
在 Hexo 文件夹下找到 config.yml 文件, 找到其中的 deploy 标签,改成下图所示形式,并保存。注意:冒号后面要加上一个空格,否则会报错
deploy:
  type: git
  repo: https://github.com/Shuang0420/Shuang0420.github.io.git

运行如下命令:

hexo clean
hexo generate
hexo deploy

发博文

 hexo new "postname" #然后在posts目录下的postname.md文件中编辑博客
 hexo clean
 hexo generate
 # (若要本地预览就先执行 hexo server)
 hexo deploy

快捷命令

 hexo g == hexo generate
 hexo d == hexo deploy
 hexo s == hexo server
 hexo n == hexo new
# 还能组合使用,如:
hexo d -g

参考链接:

http://mozhenhau.com/2015/03/05/%E5%9C%A8Mac%E9%80%9A%E8%BF%87Hexo%E5%9C%A8github%E4%B8%8A%E5%BB%BA%E7%AB%8B%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B/

http://evakasch.github.io/2016/05/04/hexo-setup/

徐阿衡 wechat
欢迎关注:徐阿衡的微信公众号
客官,打个赏呗~