一. 准备工作
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
---
三. 更换主题
- 更多主题参看 Hexo Themes 或者直接在Github上搜索
- 我因为不喜欢NexT的风格而选择了 indigo 一个Material Design风格的Hexo主题
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