博客环境搭建

  1. 修改配置文件:(不要用windows的记事本),推荐使用Sublime Text3NodePad++但是官方有污蔑国家的公告,新疆香港
  2. 下载Git:Git
  3. 下载Node.js:Node.js
  4. 查看环境安装是否成功:node -v 出现版本号,npm -v 出现版本号,git –version 出现版本号
  5. 如果node -v 报错的话,那么将Node.js的安装路径加到环境变量中。
  6. 设置npm的镜像源:查看npm的配置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #查看npm的配置
    npm config list
    #默认源
    npm config set registry https://registry.npmjs.org
    #临时改变镜像源
    npm --registry=https://registry.npm.taobao.org
    #永久设置为淘宝镜像源
    npm config set registry https://registry.npm.taobao.org
    #另一种方式,编辑 ~/.npmrc 加入下面内容
    registry = https://registry.npm.taobao.org

本地安装hexo静态博客框架

hexo框架安装初始化

新建一个文件夹,比如BolgTest的文件夹,创建完后,先不要点进去,在此处点击鼠标右键,选择Git Bash Here,然后依次输入如下命令:

1
2
3
4
5
6
# hexo框架的安装
npm install -g hexo-cli
# 等上一个命令完成后,在输入下面的命令
hexo init <新建文件夹的名称> #初始化文件夹
cd <新建文件夹的名称>
npm install # 安装博客所需要的依赖文件

生成运行

1
2
3
4
#生成Hexo页面
hexo g
#启动服务
hexo s

浏览器中打开http://localhost:4000或者127.0.0.1:4000,可以看到一个网页,说明Hexo博客已经成功在本地运行。

主题选择个性化修改

选择主题:在github上找套自己喜欢的主题,下在完解压到<blog安装路径>/themes/下。

站点配置修改在<blog安装路径>/_config.yml,主题配置文件在<blog安装路径>/themes/<>

本博客采用 butterfly 主题

1
2
3
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
#或者
git clone -b master https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly

应用站点

修改站点配置文件_config.yml,把主题改为 butterfly
theme: butterfly

个性化修改前安装插件

个性化修改前安装插件
安装 pug 以及 stylus 渲染器插件
npm install hexo-renderer-pug hexo-renderer-stylus --save
安装将要用到的插件插件
注脚插件(可选): hexo-reference,reference 插件说明。
部署插件 (必要): hexo-deployer-git
npm install hexo-wordcount hexo-wordcount hexo-generator-search hexo-reference hexo-deployer-git --save

美化参考

Xpand的hexo主题配置

感谢以下博客提供的学习参考
Butterfly 安裝文檔(一) 快速開始
Butterfly 安裝文檔(二) 主題頁面
Butterfly 安装文档(三) 主题配置
Butterfly 安装文档(四) 主题配置
Butterfly 主题更新总结
Hexo博客之butterfly主题优雅魔改系列
Hexo 大结局

推送到GitHub

注册GitHub账号

  1. 注册GitHub账号
  2. 新建仓库,仓库名为你的用户名.github.io

    git配置

  3. 配置个人信息
    1
    2
    git config --global user.name "XXXX"
    git config --global user.email "[email protected]"
  4. 生成密钥,一路回车
    1
    ssh-keygen -t rsa -C "[email protected]"
  5. 复制公钥id_rsa.pub
  6. 在GitHub中添加ssh key https://github.com/settings/keys
  7. 修改 hexo 根目录下的文件_config.yml 中的 deploy,添加仓库地址
    1
    2
    3
    4
    5
    6
    deploy:
    type: git
    repo:
    github: [email protected]:xiaopengand/xiaopengand.github.io.git
    gitee: [email protected]:xpand/xpand.git #我这是双部署
    branch: master
  8. 生成并上传仓库
    1
    hexo g -d
  9. 如果没有 hexo-deployer-git,安装
    npm install hexo-deployer-git --save

    域名解析

    暂时不写了

    域名解析成功,但显示404

    404
    在博客目录下/soure/文件下创建一个CNAME的文件,文件内容填你的域名地址
    例如我的:
    1
    2
    www.qwas.top
    qwas.top