利用Hexo和Github搭建个人博客

一. 准备工作

1. 安装Git
2. 安装Node v6.9.5 LTS
3. 安装Hexo
# 使用以下命令安装hexo到全局
$ npm install -g hexo
# 然后输入命令`hexo -v`显示hexo的版本号即为安装成功。
4. github准备

博客是在github上托管维护的,所以当然需要一个github的账号了。然后创建一个名为huqiyang.github.io
的仓库。
其中huqiyang是我的账户名,下文同理。
除此之外,相信大多数人都知道,要想使用Git命令来和github进行提交部署等操作,需要进行一些配置,大概就是下面一些命令,如不明白请自行搜索。

git config --global user.email xxx@163.com
git config --global user.name xxx
ssh-keygen -t rsa -C xxx@163.com(邮箱地址)      // 生成ssh
# 找到.ssh文件夹打开,用记事本打开id_rsa.pub,即公钥ssh串
# 登陆github,settings - SSH keys  - add ssh keys(把公钥ssh串全部添加进去即可)

二. 开始搭建博客

在某个地方新建一个项目文件夹(比如Blog),然后进入Blog目录,以下所有的命令行操作都是在这个文件夹下进行的。

# 初始化
$ hexo init
# 生成静态页面,初始化完成之后,就已经生成一篇“hello word”的文章了,现在执行以下命令把文章编译为静态页面
$ hexo generate
# 本地启动
# 在浏览器中输入http://localhost:4000/即可看到默认生成的页面效果

# 新建文章postname,该操作会在Blog/source/_posts内新建一个md文件
$ hexo new "postname" 
# 设置标签等属性,下面就写markdown文档
---
title: test
date: 2017-02-09 14:59:35
tags: Node.js
---

三. 更换主题

clone主题代码 Indigo主题说明文档

# 在目录下执行下面的命令clone主题代码
git clone https://github.com/yscoder/hexo-theme-indigo.git themes/indigo

# 安装依赖
# Less 主题默认使用 less 作为 css 预处理工具。
$ npm install hexo-renderer-less --save

# Feed 用于生成 rss。
$ npm install hexo-generator-feed --save

# Json-content 用于生成静态站点数据,用作站内搜索的数据源。
$ npm install hexo-generator-json-content --save

# QRCode 用于生成微信分享二维码。
$ npm install hexo-helper-qrcode --save

四. 部署到Github

  • 部署之前先修改Blog/_config.yml文件
deploy:
    type: git
    repository: https://github.com/huqiyang/huqiyang.github.com.git
    branch: master
  • 再输入以下命令
$ npm install hexo-deployer-git--save # 如果报错就安装这个
$ hexo deploy
# 文件生成后立即部署网站
$ hexo g -d

参考网站

hexo VS jekyll
indigo 主题
Hexo 文档

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容