D1.简单介绍及环境安装


1. Github pages介绍

  • GitHub是基于git实现的代码托管,git可能是目前最好用的版本控制系统了,数据绝对安全,基于github的版本管理,想恢复到哪个历史版本都行;
  • 博客内容可以轻松打包、转移、发布到其它平台;
  • GitHub可以免费使用,并且快速稳定;GitHub pages全是静态文件,访问速度快;
  • Github Pages可以被认为是用户编写的、托管在github上的静态网页。
  • 可以随意绑定自己的域名,不仔细看的话根本看不出来你的网站是基于github的,但暂时貌似只能绑定一个。
  • 简单快捷,使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦
  • 免费方便而且没有空间流量限制的,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台;而wordpress则需要额外支付昂贵的主机费

2. 基本环境

2.1有一个github账号

2.2安装了node.js、npm,并了解相关基础知识

在 Windows 环境下安装 Node.js 非常简单,仅须到官网下载安装文件并执行即可完成安装。

先简单介绍下 npm,引用阮一峰老师的文章:
npm 是 Node 的模块管理器,功能极其强大。它是 Node 获得成功的重要原因之一。
正因为有了npm,我们只要一行命令,就能安装别人写好的模块 。
npm install 命令用来安装模块到node_modules目录。
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的 nodejs 已经集成了 npm,所以之前 npm 也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。

1531744932898

2.3安装了git for windows(或者其它git客户端)

下载安装git。下载地址https://git-scm.com/downloads

1531744982258

2.4 配置SSH key

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

1
ssh-keygen -t rsa -C "chendi2082009@qq.com"

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

img

将刚复制的内容粘贴到key那里,title随便填,保存。

测试是否成功

如果提示Are you sure you want to continue connecting (yes/no)?,输入yes,然后会看到:

Hi chendi20082009! You’ve successfully authenticated, but GitHub does not provide shell access.

看到这个信息说明SSH已配置成功!

此时你还需要配置:因为github每次commit都会记录他们。

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

3. 安装hexo

hexo 本身是一个静态博客生成工具,具备编译 Markdown、拼接主题模板、生成 HTML、上传 Git 或 FTP 等基本功能。将这些功能封装为命令,提供给用户通过 hexo server / hexo deploy 等命令调用的模块,就是 hexo-cli 了。CLI = Command Line Interface 命令行界面。

后者是前者的命令行模式

3.1 初始化

1
npm install -g hexo

在电脑的某个地方新建一个名为hexo的文件夹(名字可以随便取),比如我的是D:\Dropbox\hexo,由于这个文件夹将来就作为你存放代码的地方,所以最好不要随便放。

1
2
$ cd /d/dropbox/hexo/
$ hexo init

hexo会自动下载一些文件到这个目录,包括node_modules,目录结构如下图:

img

1
2
hexo g # 生成
hexo s # 启动服务

hexo s是开启本地预览服务,打开浏览器访问 http://localhost:4000/ 即可看到内容,很多人会碰到浏览器一直在转圈但是就是加载不出来的问题,一般情况下是因为端口占用的缘故,因为4000这个端口太常见了,解决端口冲突换用其它端口:

1
hexo s -p 5000

第一次初始化的时候hexo已经帮我们写了一篇名为 Hello World 的文章,默认的主题比较丑,打开时就是这个样子:

1531745666985

3.2 修改主题

下载主题至主题目录,如:maupassant-hexo

安装主题和渲染器:

编辑Hexo目录下的 _config.yml,将theme的值改为maupassant

详细的配置过程参照这里 https://www.haomwei.com/technology/maupassant-hexo.html

4.上传至github

在上传代码到github之前,一定要记得先把你以前所有代码下载下来(虽然github有版本管理,但备份一下总是好的),因为从hexo提交代码时会把你以前的所有代码都删掉。

如果你一切都配置好了,发布上传很容易,一句hexo d就搞定,当然关键还是你要把所有东西配置好。

首先,ssh key肯定要配置好。

其次,配置_config.yml中有关deploy的部分:

正确写法:

此时直接执行hexo d的话一般会报如下错误:

1
Deployer not found: github 或者 Deployer not found: git
1
原因是还需要安装一个插件:

其它命令不确定,部署这个命令一定要用git bash,否则会提示Permission denied (publickey).

打开你的git bash,输入hexo d就会将本次有改动的代码全部提交,没有改动的不会:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/chendi20082009/hexo.git
branch: master

5.一些问题

解决hexo博客的乱码问题

方法:

​ 1.将博客文件保存为UTF-8

​ 用记事本打开本地的博客文件“xxx.md”,然后点“另存为”,“编码(E):”选择“UTF-8”,

点击“保存”,替换原文件。

​ 2.重新生成,部署,博客乱码即消除。

6.常用命令

1
2
3
4
5
$ hexo g #完整命令为hexo generate,用于生成静态文件
$ hexo s #完整命令为hexo server,用于启动服务器,主要用来本地预览
$ hexo d #完整命令为hexo deploy,用于将本地文件发布到github上
$ hexo n #完整命令为hexo new,用于新建一篇文章
$ hexo clean #清楚缓存