部署

部署环境：

  • windows

前言

Github Pages(more)

可以被认为是用户编写的、托管在github上的静态网页。使用Github Pages可以为你提供一个免费的服务器，免去了自己搭建服务器和写数据库的麻烦。此外还可以绑定自己的域名。

使用github pages服务搭建博客的好处有：

全是静态文件，访问速度快；
免费方便，不用花一分钱就可以搭建一个自由的个人博客，不需要服务器不需要后台；
可以随意绑定自己的域名，不仔细看的话根本看不出来你的网站是基于github的；
数据绝对安全，基于github的版本管理，想恢复到哪个历史版本都行；
博客内容可以轻松打包、转移、发布到其它平台；
等等

Hexo(more)

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

准备工作

github账号

点击此处访问 Github 官网，点击 Sign Up 注册账户

安装node.js

点击此处访问官网，按需下载相应版本，默认安装可以了

检验安装：

1
2
node -v  
npm -v

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

安装GIT

git install

检验安装：

1
git --version

配置Git个人信息

因为Git是分布式版本控制系统，所以，每个机器都必须自报家门：你的名字和Email地址

1
2
git config --global user.name "liuxianan"// 你的github用户名，非昵称
git config --global user.email  "xxx@qq.com"// 填写你的github注册邮箱

安装Hexo

首先选择一个磁盘作为你博客文件的存放位置（例：D:\DevStudyCode），然后新建一个文件夹，比如名为 D:\DevStudyCode\hexo 的文件夹，创建完后，先不要点进去，在此处点击鼠标右键，选择Git Bash Here，然后依次输入如下命令，：

部署

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

测试效果

执行以下命令，执行完即可登录 http://localhost:4000/ 查看效果

1
2
hexo generate  
hexo server

保留CNAME、README.md等文件

提交之后网页上一看，发现以前其它代码都没了，此时不要慌，一些非md文件可以把他们放到source文件夹下，这里的所有文件都会原样复制（除了md文件）到public目录的：

由于hexo默认会把所有md文件都转换成html，包括README.md，所有需要每次生成之后、上传之前，手动将README.md复制到public目录，并删除README.html。

常用hexo命令

1
2
3
4
5
6
7
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #根据配置文件渲染出一套静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

缩写：

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

组合命令：

1
2
hexo s -g #生成并本地预览
hexo d -g #生成并上传

将博客部署到Github Pages

创建仓库

新建一个名为你的用户名.github.io的仓库，比如说，如果你的github用户名是test，那么你就新建test.github.io的仓库（**必须是你的用户名，其它名称无效**），将来你的网站访问地址就是 http://test.github.io 了

注意事项：

  • 注册的邮箱一定要验证，否则不会成功；
  • 仓库名字必须是：username.github.io，其中username是你的用户名；
  • 仓库创建成功不会立即生效，需要过一段时间，大概10-30分钟，或者更久，我的等了半个小时才生效；

ssh公钥添加到GitHub

为什么要配置这个呢？因为你提交代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题。

1
cd ~/.ssh #检查本机已存在的ssh密钥
1
ssh-keygen -t rsa -C "邮件地址"

然后连续3次回车，最终会生成一个文件在用户目录下，打开用户目录，找到.ssh\id_rsa.pub文件，记事本打开并复制里面的内容
打开你的github主页，进入个人设置 ->SSH and GPG keys -> New SSH key：

本地测试配置是否生效：

1
ssh -T git@github.com # 注意邮箱地址不用改

将本地hexo文件更新到Github库

进入博客站点目录，我的是D:\DevStudyCode\hexo，用文本编辑器打开_config.yml，这个_config.yml 是博客的配置文件，在以后的博客修改，如个性化修改，博客 SEO 优化等都会使用到，修改如下图的几个地方：

title: 你的博客名
subtitle: 博客的副标题，有些主题支持
description: 博客描述
keywords: 博客关键词
author: 作者，在文章中显示
language: 博客语言语种   
timezone: 时区

到文件最底部，有一个 deploy，在 deploy 下面添加一个 repo 项 ，一个 branch 项。填入如下代码，并如下图所示：

1
2
3
4
type: git
repo: git@github.com:Github用户名/github用户名.github.io.git
//也可使用https地址，如：https://github.com/Github用户名/Github用户名.github.io.git
branch: master

发布至 Github Pages：
在Hexo目录下执行

1
2
3
4
5
6
# Hexo会根据配置文件渲染出一套静态页面
hexo g
# 将上一步渲染出的一系列文件上传至至Github Pages
hexo d
# 也可以直接输入此命令，直接完成渲染和上传
hexo g -d

访问博客：
你的博客地址：https://你的用户名.github.io

Hexo 使用

关于主题修改(美化)：
由于不同主题的配置方法都是存在差异的，如果想进行修改，请参考对应作者的Github。
下面是一些通用的配置方法，可以作为参考

主题配置

更换主题

步骤参考：
首先下载这个主题：

1
2
3
# D:\DevStudyCode\hexo右键选择Git Bash Here，进入到hexo目录

git clone https://github.com/litten/hexo-theme-matery.git themes/matery

注意：
需要明白什么是站点配置文件，什么是主题配置文件，站点配置文件就是根目录下的配置文件，比如我的博客文件在 D:\DevStudyCode\hexo 下，那么站点配置文件就是D:\DevStudyCode\hexo\_config.yml，主题配置文件就D:\DevStudyCode\hexo\themes\matery\_config.yml。

主题下载完成后，将站点配置文件_config.yml中的 theme: landscape修改为你下载主题的文件名theme: matery，然后重新执行hexo g来重新生成。。另外，配置文件中的标点符号不要出现中文格式，不然运行会出错。

如果出现一些莫名其妙的问题，可以先执行hexo clean来清理一下public的内容，然后再来重新生成和发布。

一些站点配置文件的其他地方的修改：

新建页面

标签 tags 页面
tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下：

1
hexo new page "tags"

编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：

1
2
3
4
5
---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
---

分类 categories 页面
categories 页是用来展示所有分类的页面，配置方法参考tags页面

关于我 about 页面
about 页是用来展示关于我和我的博客信息的页面，配置方法参考tags页面

DIY

页面添加樱花飘落效果

非通用，配置前请备份，如果主题不支持，方便还原。

在 themes/matery/source/js 目录下新建 sakura.js 文件，打开这个网址传送门，将内容复制粘贴到 sakura.js 即可。
然后再 themes/matery/layout/layout.ejs 文件内添加下面的内容：

1
2
3
4
5
6
7
<script type="text/javascript">
//只在桌面版网页启用特效
var windowWidth = $(window).width();
if (windowWidth > 768) {
    document.write('<script type="text/javascript" src="/js/sakura.js"><\/script>');
}
</script>

域名绑定

参考Hexo个性域名
不绑定域名情况下，默认使用xxx.github.io来访问