Hexo + GitHub搭建博客的教程

        众所周知,要想搭建一个属于自己的博客,首先需要一台自己的服务器,其次就是一个域名,最后把域名解析到自己的服务器。那有没有办法不需要购买自己的服务器,也可以简易的搭建一个属于自己的博客呢?答案是肯定的。Github是一个不错的选择。

        大家都知道Github是一个代码仓库,并且Github很好的将代码和社区联系在了一起。作为现在最流行的代码仓库,已经得到很多大公司和项目的青睐,比如jQuery、Twitter等。为使项目更方便的被人理解,介绍页面少不了,甚至会需要完整的文档站,Github替你想到了这一点,他提供了Github Pages的服务,不仅可以方便的为项目建立介绍站点,也可以用来建立个人博客。

GitHub Pages 是什么?
     本用于介绍托管在 GitHub 的项目, 不过,由于他的空间免费稳定,用来做搭建一个博客再好不过了。

        了解GitHub Pages 之后,这样的话,服务器可以就省掉了,域名的话可以使用Github默认提供的地址,当然也可以自己购买域名,然后来绑定,实现之间的一个关联绑定。


        下面,详细介绍一下 如何使用Hexo + GitHub搭建属于我们自己博客

        现在把 Hexo + GitHub Pages 搭建博客的完整过程记录下来:

目录流程:
1. 搭建 Node.js 环境
2. 搭建 Git 环境
3. GitHub 注册和配置
4. 安装配置 Hexo
5. 关联 Hexo 与 GitHub Pages
6. GitHub Pages 地址解析到个人域名
7. Hexo 的常用操作
8. 结束语

        环境准备:

        要使用Hexo,需要在你的系统中支持Nodejs以及Git,如果还没有,那就开始安装吧!

        1、搭建 Node.js 环境:

          为什么要搭建 Node.js 环境? - 因为 Hexo 博客系统是基于 Node.js 编写的。


        nodejs官网:https://nodejs.org/en/

        因为我的本地是window系统,所以这里选择下载 Windows 安装版本,如果是其他系统环境,可参考 Nodejs 安装配置

        在 Windows 环境下安装 Node.js 非常简单,仅须到官网下载安装文件并执行即可完成安装。windows安装就是傻瓜式下一步安装即可,Nodejs 安装配置 当中也有记录。本文下载安装的是 node-v8.11.3-x64.msi 版本。

        冷暖自知一抹茶ck

           

            保持默认设置即可,一路Next,安装很快就结束了。


            冷暖自知一抹茶ck

            

            安装完成之后,在cmd 命令行,执行 命令:

node -v
npm -v

            如果结果如下图所示,则说明安装正确,可以进行下一步了,如果不正确,则需要回头检查自己的安装过程。           

            冷暖自知一抹茶ck

        

        2、搭建 Git 环境:

        为什么要搭建 Git 环境? - 因为需要把本地的网页和文章等提交到 GitHub 上。

        Git 是一款免费、开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。


        Git官网:https://git-scm.com/

        安装教程:如何在windows下安装Git

        Git入门教程:Pro Git(中文版) 

        下载 git安装包,安装完成后,在桌面----右键,打开 Git Bush Here,输入  git --version

ck@LAPTOP-HBHSMOI7 MINGW64 ~/Desktop
$ git --version
git version 2.14.1.windows.1

        出现版本号则说明 Git 环境配置成功,第二步完成!!!


        3、GitHub 注册和配置:

        GitHub 是一个代码托管平台,因为只支持 Git 作为唯一的版本库格式进行托管,故名 GitHub。


        Github官网:https://github.com/

        没有 Github 账号的,需要先注册一个账号,注册号账号之后,就需要配置一下了。

        划重点:

            创建仓库:Repository name 使用自己的用户名,仓库名规则:

            注意:yourname ,必须是你的用户名,即 yourname/yourname.github.io

            冷暖自知一抹茶ck


            冷暖自知一抹茶ck

            访问 yourname.github.io,如果可以正常访问,那么 Github 的配置已经结束了。

            到此搭建 Hexo 博客的相关环境配置已经完成,下面开始讲解 Hexo 的相关操作


        4、安装配置 Hexo

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

        Hexo 的官方文档:https://hexo.io/zh-cn/ 


        回到桌面点击右键,选择Bit Bash Here,如图:

        冷暖自知一抹茶ck

        使用 npm 安装 Hexo:在命令行中输入 : npm install hexo-cli -g

ck@LAPTOP-HBHSMOI7 MINGW64 /d
$ cd software/wamp64/www/

ck@LAPTOP-HBHSMOI7 MINGW64 /d/software/wamp64/www
$ npm install hexo-cli -g

        然后你将会看到下图,可能你会看到一个WARN,但是不用担心,这不会影响你的正常使用。

        查看Hexo的版本 :  执行命令 hexo version

ck@LAPTOP-HBHSMOI7 MINGW64 /d/software/wamp64/www
$ hexo version
hexo-cli: 1.1.0
os: Windows_NT 10.0.16299 win32 x64
http_parser: 2.8.0
node: 8.11.3
v8: 6.2.414.54
uv: 1.19.1
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.32.0
napi: 3
openssl: 1.0.2o
icu: 60.1
unicode: 10.0
cldr: 32.0
tz: 2017c

        安装 Hexo 完成后,请执行下列命令 : hexo init 961900940.github.io 来初始化 Hexo,用户名改成你的,Hexo 将会在指定文件夹中新建所需要的文件。

ck@LAPTOP-HBHSMOI7 MINGW64 /d/software/wamp64/www
$ hexo init 961900940.github.io

        初始化博客以后,我们可以看到博客文件夹里的文件是这样的:

├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件,404、favicon、CNAME 都应该放在这里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主题
├── _config.yml #全局配置文件
└── package.json

        进入961900940.github.io 文件夹,安装依赖包

ck@LAPTOP-HBHSMOI7 MINGW64 /d/software/wamp64/www
$ cd 961900940.github.io/

ck@LAPTOP-HBHSMOI7 MINGW64 /d/software/wamp64/www/961900940.github.io
$ npm install

        运行本地 Hexo 服务:执行命令(在 961900940.github.io 文件夹)hexo server

ck@LAPTOP-HBHSMOI7 MINGW64 /d/software/wamp64/www/961900940.github.io
$ hexo server

        您的网站会在 http://localhost:4000 下启动。如果 http://localhost:4000 能够正常访问,则说明 Hexo 本地博客已经搭建起来了,只是本地哦,别人看不到的。下面,我们要部署到Github。        

        冷暖自知一抹茶ck

        问题:

                执行hexo server提示找不到该指令

        解决办法:

                在Hexo 3.0 后server被单独出来了,需要安装server,安装的命令如下:npm install hexo -server --save

ck@LAPTOP-HBHSMOI7 MINGW64 /d/software/wamp64/www/961900940.github.io
$ npm install hexo -server --save

        安装此server后再试,问题解决           



        5、关联 Hexo 与 GitHub Pages

        配置 SSH keys:

        我们如何让本地git项目与远程的github建立联系呢?用 SSH keys 生成SSH keys。


        检查 SSH keys的设置:

        首先我们需要检查你电脑上现有的 ssh key: 执行命令:   cd ~/.ssh

ck@LAPTOP-HBHSMOI7 MINGW64 ~/Desktop
$ cd ~/.ssh
bash: cd: /c/Users/ck/.ssh: No such file or directory

        如果提示:No such file or directory 说明你是第一次使用 git。

        生成新的 SSH Key:  执行命令 :ssh-keygen -t rsa -C "邮件地址@youremail.com"

ck@LAPTOP-HBHSMOI7 MINGW64 ~/Desktop
$ ssh-keygen -t rsa -C "961900940@qq.com"
Generating public/private rsa key pair.

        在回车中会提示你输入一个密码,这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。我们按回车不设置密码。

        输入eval "$(ssh-agent -s)",添加密钥到ssh-agent


ck@LAPTOP-HBHSMOI7 MINGW64 ~/Desktop
$ eval "$(ssh-agent -s)"
Agent pid 18524

    再输入ssh-add ~/.ssh/id_rsa,添加生成的SSH key到ssh-agent

ck@LAPTOP-HBHSMOI7 MINGW64 ~/Desktop
$ ssh-add ~/.ssh/id_rsa
Identity added: /c/Users/ck/.ssh/id_rsa (/c/Users/ck/.ssh/id_rsa)

        最后看到这样的界面,就成功设置ssh key了:

        冷暖自知一抹茶ck


        添加 SSH Key 到 GitHub:

        在本机设置 SSH Key 之后,需要添加到 GitHub上,以完成 SSH 链接的设置。

        ①、打开本地 id_rsa.pub 文件 ( 参考地址  C:\Users\ck\.ssh\id_rsa.pub )。此文件里面内容为刚才生成的密钥。如果看不到这个文件,你需要设置显示隐藏文件。准确的复制这个文件的内容,才能保证设置的成功。

        ②、登陆 GitHub 系统。点击右上角的 Account Settings--->SSH and GPG keys ---> New SSH key

        ③、把你本地生成的密钥复制到里面( key 文本框中), 点击 add key 就ok了。


        测试:

        可以输入下面的命令,看看设置是否成功,git@GitHub.com 的部分不要修改:

ck@LAPTOP-HBHSMOI7 MINGW64 ~/Desktop
$ ssh -T git@GitHub.com

        如果是下面的反馈:

The authenticity of host 'github.com (13.250.177.223)' can't be established.
RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no)?

        不要紧张,输入 yes 就好,然后会看到:

Hi 961900940! You've successfully authenticated, but GitHub does not provide shell access.

        

        设置用户信息:

        现在你已经可以通过 SSH 链接到 GitHub 了,还有一些个人信息需要完善的。

        Git 会根据用户的名字和邮箱来记录提交。GitHub 也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的,名字必须是你的真名,而不是GitHub的昵称。

ck@LAPTOP-HBHSMOI7 MINGW64 ~/Desktop
$ git config --global user.name "ck"

ck@LAPTOP-HBHSMOI7 MINGW64 ~/Desktop
$ git config --global user.email  "961900940@qq.com"

        可以使用git config --list查看已经配置好的信息,有core、user、diff等

ck@LAPTOP-HBHSMOI7 MINGW64 ~/Desktop
$ git config --list
core.symlinks=false
core.autocrlf=true
core.fscache=true
color.diff=auto
color.status=auto
color.branch=auto
color.interactive=true
help.format=html
rebase.autosquash=true
http.sslcainfo=D:/software/Git/mingw64/ssl/certs/ca-bundle.crt
http.sslbackend=openssl
diff.astextplain.textconv=astextplain
filter.lfs.clean=git-lfs clean -- %f
filter.lfs.smudge=git-lfs smudge -- %f
filter.lfs.required=true
filter.lfs.process=git-lfs filter-process
credential.helper=manager
user.name=ck
user.email=961900940@qq.com

        SSH Key 配置成功!!!

        若有问题,请重新设置。常见错误请参考:


        配置博客:

        基于上一步,我们对博客修改相应的配置,我们用到_config.yml文件,下面是该文件的默认参数信息:

        1. 修改网站相关信息

title: 冷暖自知一抹茶ck
subtitle: 冷暖自知一抹茶ck
description: 冷暖自知一抹茶ck Hexo + GitHub Page搭建博客的教程
keywords: 冷暖自知一抹茶 Hexo GitHub Page 博客
author: ck
language: zh-CN
timezone: Asia/Shanghai

        查看更多配置:全局配置 _config.yml

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site #站点信息
title:  #标题
subtitle:  #副标题
description:  #站点描述,给搜索引擎看的
author:  #作者
email:  #电子邮箱
language: zh-CN #语言
# URL #链接格式
url:  #网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿)
titlecase: false #标题转换成大写
external_link: true #在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #语法高亮
  enable: true #是否启用
  line_number: true #显示行号
  tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分页
per_page: 10 #每页文章数,设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论,替换为多说
disqus_shortname:
# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:
plugins: #插件,例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署,将 lmintlcx 改成用户名
deploy:
  type: git
  repo: 刚刚github创库地址.git
  branch: master

        注意:

                配置文件的冒号“:”后面有一个空格

                repo: 刚刚github创库地址.git       


        2. 配置统一资源定位符(个人域名)

url: https://961900940.github.io/

        对于root(根目录)、permalink(永久链接)、permalink_defaults(默认永久链接)等其他信息保持默认。


        3. 配置部署

deploy:
  type: git
  repo: https://github.com/961900940/961900940.github.io.git
  branch: master

        其中repo项是之前Github上创建好的仓库的地址,可以通过如下图所示的方式得到:

        冷暖自知一抹茶ck

        branch是项目的分支,我们默认用主分支master。


        发表一篇文章:

        在终端输入:

ck@LAPTOP-HBHSMOI7 MINGW64 ~/Desktop
$ cd D:

ck@LAPTOP-HBHSMOI7 MINGW64 /d
$ cd software/wamp64/www/

ck@LAPTOP-HBHSMOI7 MINGW64 /d/software/wamp64/www
$ cd 961900940.github.io

ck@LAPTOP-HBHSMOI7 MINGW64 /d/software/wamp64/www/961900940.github.io
$ hexo new "新的文章"
INFO  Created: D:\software\wamp64\www\961900940.github.io\source\_posts\新的文章.md

ck@LAPTOP-HBHSMOI7 MINGW64 /d/software/wamp64/www/961900940.github.io

        我们可以在本地博客文件夹source->_post文件夹下看到我们新建的markdown文件。

ck@LAPTOP-HBHSMOI7 MINGW64 /d/software/wamp64/www/961900940.github.io

        冷暖自知一抹茶ck

        用Markdown编辑器打开文件,我们可以看到这样的内容:

---
title: 新的文章
date: 2017-08-23 21:49:22
tags:
---

        我们编辑下:

---
title: 新的文章
date: 2017-08-23 21:49:22
tags:
---
##第一篇文章
###生活不止眼前的苟且,还有诗和远方的田野.

        冷暖自知一抹茶ck

        打开浏览器,输入:http://localhost:4000/ 

        我们可以在浏览器端看到我们搭建好的博客和发布的文章:

        冷暖自知一抹茶ck


        但是毕竟我们目前发布的只有本机看得到,怎么让其他人看到我们写的博客呢?这时候我们来看看博客的部署。

        hexo部署:

        我们只要在终端执行这样的命令即可:

ck@LAPTOP-HBHSMOI7 MINGW64 /d/software/wamp64/www/961900940.github.io
$ hexo generate

ck@LAPTOP-HBHSMOI7 MINGW64 /d/software/wamp64/www/961900940.github.io
$ hexo deploy

        冷暖自知一抹茶ck


        6、GitHub Pages 地址解析到个人域名

        将独立域名与GitHub Pages的空间绑定

        在阿里云上买了一个域名,并将博客绑定自己的域名。

        在 GitHub 仓库的根目录下建立一个 CNAME 的文本文件(注意:没有扩展名),文件里面只能输入一个你的域名,不能加http://

www.lovebxm.com

        注意:CNAME 一定是在你 Github 项目的 master 根目录下

        进入阿里云域名解析地址,添加解析:

        1、记录类型选择CNAME
        2、主机记录填www
        3、解析线路选择默认
        4、记录值填yourname.github.io
        5、TTL值为10分钟
        6、再添加一个解析,记录类型A
        7、主机记录填@
        8、解析线路选择默认
        9、记录值填你GitHub 的ip地址(在cmd中ping:)

        冷暖自知一抹茶ck

        点击保存,等 1 分钟,访问下你自己的域名,一切就ok了。

        其中A的两条记录指向的ip地址是github Pages的提供的ip

        如何知道你的github上项目的IP,如下:

        冷暖自知一抹茶ck

        注意:CNAME文件在下次 hexo deploy的时候就消失了,需要重新创建,这样就很繁琐

        方法一:每次 hexo d 之后,就去 GitHub 仓库根目录新建 CNAME文件

        方法二:在 hexo g 之后, hexo d 之前,把CNAME文件复制到 “public" 目录下面,里面写入你要绑定的域名。

        方法三(推荐):将需要上传至github的内容放在source文件夹,例如CNAME、favicon.ico、images等,这样在 hexo d 之后就不会被删除了。

        方法四:通过安装插件实现永久保留

npm install hexo-generator-cname --save

        之后在_config.yml中添加一条

plugins:

        需要注意的是:如果是在github上建立的CNAME文件,需要先clone到本地,然后安装插件,在deploy上去即可。CNAME只允许一个域名地址。

        注意1:每次生成的 CNAME 都是 yoursite.com 怎么解决?

        修改 _config.yml

url: http://www.xxxx.com


        7、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 new "标题"

        在 _posts 目录下会生成文件标题.md

title: Hello World
date: 2015-07-30 07:56:29 #发表日期,一般不改动
categories: hexo #文章文类
tags: [hexo,github] #文章标签,多于一项时用这种格式
---
正文,使用Markdown语法书写

        编辑完后保存,hexo server 预览。



附:

        Hexo 快速、简洁且高效的博客框架 :https://hexo.io/zh-cn/ 




冷暖自知一抹茶ck
请先登录后发表评论
  • 最新评论
  • 总共0条评论