Hexo + Github 搭建个人博客

2018-09-04 本文已影响49人 scofieldwenwen

欢迎来到 scofieldwenwen 的个人博客，受到 stormzhang 的影响，决定开始搭建自己的博客。该文是我自己搭建博客的过程，采用的是 Hexo 博客框架管理，使用 Github 托管，将自己的域名关联到 Github Pages 上。

安装 git

在 Windows 平台下载安装 Git，点击下载Git
安装教程: 在 Windows 上安装 Git
Git 的命令就是 Linux 的 shell 命令行: Git 基本操作命令
查看 Git 安装是否完成，在 win+r 中输入 cmd 命令窗口弹出后，输入 git –version 查看 git 版本
设置 Git 的用户名和邮箱：
$ git config --global user.name "scofieldwenwen"
$ git config --global user.email "scofieldwenwen@163.com"

在创建目标文件夹 (如 D:\hexo)，在 hexo 文件夹里，单机右键选择 Git Bash Here，输入以下命令安装 Hexo :
$ npm install -g hexo-cli
Hexo 初始化配置
$ npm hexo init
$ npm install
初始化之后， hexo 的结构目录如下:[图片上传失败...(image-ceb47f-1536048027888)]
Hexo 常用的命令行：
hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成生成静态网页，可以在 public 目录查看整个网站的文件
hexo server #本地预览，'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存，强烈建议每次执行命令前先清理缓存，每次部署前先删除 .deploy 文件夹

简写：
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
Hexo 安装 server，生成静态文件后，用 server 启动服务器，从而预览。
$ npm install hexo-server --save
可以就可以查看第一个 hexo 默认生成的 blog ，输入命令：
$ hexo generate
$ hexo server
在浏览器查看本地静态网页：http://localhost:4000/
[图片上传失败...(image-4d00a3-1536048027888)]
看到这个页面有点小激动，本地博客搭建起来了，不过只是个本地的网页而已，接下来就要把网页部署上去。

准备一个 Github 账号，没有的就去官网注册一个账号。
创建一个仓库 repository，用来托管博客。仓库名必须为 [github用户名].github.io
[图片上传失败...(image-4ef99-1536048027889)]
配置 SSH 密钥教程：github 设置添加 SSH
将本地的 Hexo 文件同步到 Github 的仓库中：
复制刚才创建仓库的 HTTPS 链接
[图片上传失败...(image-41cb6a-1536048027889)]
将链接粘贴到 Hexo 文件目录的 _config.yml 配置文件上保存：
deploy:
type: git
repo: https://github.com/scofieldwenwen/scofieldwenwen.github.io.git
branch: master
注意：配置文件键值之间必须有个空格
将博客部署上去：
$ hexo g
$ hexo d 或者直接输入
$ hexo g -d
在浏览器查看 Github Pages，在浏览器输入 username.github.io (我的是scofieldwenwen.github.io) 就可以看到自己的博客了!到这里一个免费的博客就创建好了。

配置博客： Hexo 官网教程
在 Hexo 官网选取主题
将主题在 Github 上打开，复制 Clone HTTPS ，然后在在 hexo\theme 目录下 clone 该主题，如我使用是Next主题
git clone https://github.com/iissnan/hexo-theme-next.git
clone 成功后，修改 Hexo 目录中的配置文件 _config.yml 的主题，主题名字为 clone 下来的主题文件夹名称
theme: hexo-theme-next
生成静态网页，查看本地效果
$ hexo g
$ hexo s
效果可以的话，就部署到 Github 上
$ hexo clean
$ hexo g -d