搭建本地环境:Hexo框架

Hexo为何物

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用Markdown解析文章,并瞬间利用靓丽的主题生成静态网页。其中,Markdown是一个用于将普通文本转换为HTML的工具,它以易于阅读和编写的纯文本格式进行编写,然后将其转换为的HTML(或XHTML)。

Hexo安装

本文是基于Windows7系统安装,如果是其他系统可参见Hexo官方文档

Hexo安装的前提是电脑预安装Node.js和Git。如果你的电脑已安装Node.js和Git,直接跳到第三步开始安装Hexo;如果未安装则需要先按照前两步提示进行安装,下载安装非常快。

  1. Node.js下载安装,默认安装即可。
  2. Git下载安装,Git官网下载速度非常慢,建议在腾讯软件中心下载Git,默认安装即可。用作将本地的内容提交到GitHub仓库,后续会介绍如何操作。
  3. 利用 npm 命令安装Hexo。在任意位置右击鼠标,选择Git Bash输入以下命令即可安装。耗时稍长,安装顺利的话只需要几分钟,如果在安装过程中遇到问题,可重新安装。其中,npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。
    1
    $ npm install -g hexo-cli

成功安装Node.js、Git和Hexo后,可用以下命令查看相应版本,结果如下图:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$ node -v        
v8.12.0 $ npm -v //查看npm版本
6.4.1 $ git --version //查看git版本
git version 2.19.1.windows.1 $ hexo --version //查看hexo版本
hexo: 3.8.0
hexo-cli: 1.1.0
os: Windows_NT 6.1.7601 win32 x64
http_parser: 2.8.0
node: 8.12.0
v8: 6.2.414.66
uv: 1.19.2
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.32.0
napi: 3
openssl: 1.0.2p
icu: 60.1
unicode: 10.0
cldr: 32.0
tz: 2017c

建站

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。了解目录结构及相关信息可参看Hexo官方文档,稍后配置Hexo时会涉及到。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

至此博客本地环境已经搭建完毕,并附上Hexo常用命令。下面进行测试一下,发布一篇名为”Test”的博文,结果展示如下图:

1
2
3
$ hexo new "Test"  //新建一篇文章,new后面跟的是标题,最好用双引号括起来,特别是标题中有空格
$ hexo g //生成静态文件,g是generate的简写
$ hexo s //启动服务器。默认情况下,访问网址为: http://localhost:4000/。

搭建GitHub环境

  1. Github注册
  2. 新建仓库(new repository)。注意Owner与repository的前半部分必须一致,比如
  3. 开启GitHub Pages。进入刚才新建的仓库,点击Settings并将页面拉到底,即可看见GitHub Pages,该主页托管了上述建立的仓库,主页地址如下图所示,即为刚才新建的仓库地址。

关联Hexo与GitHub Pages

初次运行 Git 前的配置

  1. 初始化Git,创建一个空的Git仓库,或者重新初始化存在的仓库:

    1
    $ git init
  2. 设置你的用户名称与邮件地址:

    1
    2
    $ git config --global user.name "John Doe"  //GitHub注册用户名
    $ git config --global user.email johndoe.com //GitHub注册邮箱

如果使用了 –global 选项,那么该命令 大专栏  Hexo+Git一个小时快速搭建个人博客只需要运行一次,因为之后无论你在该系统上做任何事情, Git 都会使用那些信息。 当你想针对特定项目使用不同的用户名称与邮件地址时,可以在那个项目目录下运行没有 –global 选项的命令来配置。

使用SSH连接到GitHub

该部分参考Github帮助文档:Connecting to GitHub with SSH

  1. 查看存在的SSH公/私钥。通常私钥保存在文件id_rsa,私钥保存在文件id_rsa.pub。

    1
    $ ls -al ~/.ssh
  2. 生成SSH公/私钥

    1
    2
    3
    4
    $ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"  //替换邮箱为注册邮箱
    $ Enter a file in which to save the (/c/Users/you/.ssh/id_rsa): //提示输入公/私钥保存路径,直接回车即可
    $ Enter passphrase (empty for no passphrase): //输入密码,可以留空,直接回车即可
    $ Enter same passphrase again: //再次输入密码,可以留空,直接回车即可
  3. 将秘钥添加到SSH代理

    1
    2
    3
    4
    $ eval $(ssh-agent -s)  //首先确保SSH代理在运行
    Agent pid 59566 //显示进程id $ ssh-add ~/.ssh/id_rsa //将秘钥添加到SSH代理
  4. 将公钥添加到Github账户

    1
    $ clip < ~/.ssh/id_rsa.pub  //复制刚才生成的公钥,如果公钥保存路径不是默认路径则该命令无效

然后点击Github页面右上角的头像,在弹出栏中点击Settings,并在新页面左边栏中点击SSH and GPG keys,在弹出页面点击New SSH key,并将复制的公钥贴过去,title会根据邮箱自动生成。

  1. 测试SSH连接
    1
    2
    $ ssh -T git@github.com //测试代码,出现下一行提示表示连接成功
    Hi username! You've successfully authenticated, but GitHub does not provide shell access.

将网站部署到服务器

  1. 安装 hexo-deployer-git:

    1
    $ npm install hexo-deployer-git --save
  2. 配置Deployment。

    1
    2
    3
    4
    deploy:
    type: git
    repo:git@github.com:githubname/githubname.github.io.git
    branch: master

找到根目录中_config.yml中Deployment,按照以下代码格式,将其中的githubname更换为你的Github注册用户名即可。

  1. 将博客发布到Github
    1
    2
    3
    $ hexo clean  //清除缓存文件 (db.json) 和已生成的静态文件 (public)。
    $ hexo generate // 生成静态文件
    $ hexo deploy // 部署网站

这样就实现了Hexo本地环境与Github的关联,即可通过 http://githubname.github.io 访问你部署在Github上的博客了,如下图所示。

绑定域名

  1. 购买域名。阿里云,腾讯云等都有,最便宜的9块钱
  2. 域名解析设置。需要设置的参数,如下表所示,其他参数默认即可。
记录类型 主机记录 记录值
CNAME @ githubname.github.io
A www IPV4地址1
  • 记录类型选择CNAME,则记录值填写githubname.github.io(GitHub Pages 对应域名)。
  • 记录类型选择A,则记录值填写IPV4地址,通过ping上述GitHub Pages 域名获取IPV4地址,即下表的185.199.108.153,每次ping获取得到的IPV4地址可能都不相同,所以可以不采用这种方式。
  • 主机记录填写@,则直接解析主域名,前边没有www,如aliyun.com,无论你在浏览器地址栏输入的网址是否加www。
  • 主机记录填写www,则解析后的域名含有www,如www.aliyun.com。
    1
    2
    $ ping zhaoshengxu.github.io //ping操作
    正在 Ping zhaoshengxu.github.io [185.199.108.153] 具有 32 字节的数据: //返回结果第1行
  1. 在博客根目录下的source文件夹中新建名为CNAME的无后缀文件,并将购买的域名写入(不加www),如下图所示。

  2. 将购买的个性化域名绑定到Github Pages。将个性化域名填入Github Pages页面的Custom domain中并保存,上翻Github Pages页面即可看到,该页面已经和你的个性化域名绑定成功。

  3. 测试输入个性化域名访问你的博客首页。

恭喜完成博客的初期搭建,起航吧!

参考资料

  1. Hexo官方文档
  2. Github帮助文档:Connecting to GitHub with SSH
  3. HEXO+Git+Github+域名搭建个人博客
  4. hexo+github搭建个人博客(超详细教程)

Hexo+Git一个小时快速搭建个人博客的更多相关文章

  1. 使用Hexo和Github Pages快速搭建个人博客

    在编程路上,每天都在网上查看别人的博客,大牛的文章写得通俗易懂,同时博客网站也非常华丽.作为出入编程的一枚小白也想拥有这样一个自己的网站.那就立马去买一个域名了,在网上找教程来搭建. 搭建的过程还算比 ...

  2. 利用GitHub Pages + jekyll快速搭建个人博客

    前言 想搭建自己博客很久了(虽然搭了也不见得能产出多频繁). 最初萌生想写自己博客的想法,想象中,是自己一行一行码出来的成品,对众多快速构建+模板式搭建不屑一顾,也是那段时间给闲的,从前后端选型.数据 ...

  3. 在GitLab pages上快速搭建Jekyll博客

    前一段时间将我的Jekyll静态博客从github pages镜像部署到了 zeit.co(现vercel)上了一份,最近偶然发现gitlab pages也不错,百度也会正常抓取,于是动手倒腾,将gi ...

  4. 巨杉Tech | 十分钟快速搭建 Wordpress 博客系统

    介绍 很多互联网应用程序开发人员第一个接触到的网站项目就是博客系统.而全球使用最广的Wordpress常常被用户用来快速搭建个人博客网站.默认情况下,Wordpress一般在后台使用MySQL关系型数 ...

  5. 从零到一快速搭建个人博客网站(域名自动跳转www,二级域名使用)(二)

    前言 本篇文章是对上篇文章从零到一快速搭建个人博客网站(域名备案 + https免费证书)(一)的完善,比如域名自动跳转www.二级域名使用等. 域名自动跳转www 这里对上篇域名访问进行优化,首先支 ...

  6. 2019基于Hexo快速搭建个人博客,打造一个炫酷博客(1)-奥怪的小栈

    本文转载于:奥怪的小栈 这篇文章告诉你如何在2019快速上手搭建一个像我一样的博客:基于HEXO+Github搭建.并完成SEO优化,打造一个炫酷博客. 本站基于HEXO+Github搭建.所以你需要 ...

  7. 使用 Github 和 Hexo 快速搭建个人博客

    导语 个人兴趣爱好特别广泛,喜欢捣鼓各种小东西自娱自乐.虽然都没能深入研究,但是自己的“孩子”还是很想拿出来遛遛得人一句夸奖的.所以刚学 Markdown 的时候很是有想过要搭个个人博客来玩玩,一来激 ...

  8. 基于Hexo+Node.js+github+coding搭建个人博客——基础篇

    附上个人教程:http://www.ookamiantd.top/2017/build-blog-hexo-base/ 搭建此博客的动机以及好处在此就不多谈了,之前已经表达过,详情请看Start My ...

  9. 从零到一快速搭建个人博客网站(域名备案 + https免费证书)(一)

    环境介绍 资源 说明 centos v7.2 docker 快速部署项目环境 nginx 反向代理,同时配置https证书 halo v1.4.2,开源博客项目 Let's Encrypt 免费证书 ...

随机推荐

  1. Python常用模块小结

    目录 Python常用模块小结 一.Python常用模块小结 1.1 time模块 1.2 datetime模块 1.3 random模块 1.4 os模块 1.5 sys模块 1.6 json模块 ...

  2. 创建Git仓库

    创建Git仓库 一.什么是版本仓库 什么是版本库呢?版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能 ...

  3. docker 一些简略环境搭建及部分链接

    1.center 7  搭建 docker https://www.cnblogs.com/yufeng218/p/8370670.html 2.docker 命令 https://www.cnblo ...

  4. python通过wakeonlan唤醒内网电脑开机

    首先需要pip3 install wakeonlan 然后在电脑需要你的网卡支持网络唤醒计算机. 然后在主板BIOS开启支持唤醒. 在系统网卡属性里选上“允许计算机关闭此设备以节约电源”,“允许此设备 ...

  5. NSPredicate 应用

    //查询单词里面包含“ang”的字符串 NSArray *array = [[NSArray alloc]initWithObjects:@"beijing",@"sha ...

  6. 微信小程序生成海报保存图片到相册小测试

    test.wxml <canvas style="width:{{imageWidth}}px;height:{{imageHeight}}px;" canvas-id=&q ...

  7. tensorflow用法记录

    使用 embedding 变量 import tensorflow as tf import numpy as np sess = tf.InteractiveSession() M = list(' ...

  8. C#.NET中的ToString()数字格式化

    数字格式字符串-----货币-----.ToString("C");.ToString("c");例 2.5.ToString("c") - ...

  9. Underscore _.template 方法使用详解

    为什么用「void 0」代替「undefined」 undefined 并不是保留词(reserved word),它只是全局对象的一个属性,在低版本 IE 中能被重写. 事实上,undefined ...

  10. 用shell脚本生成at一次性的计划任务

    用shell生成一次性计划任务,这个任务就是执行另一个脚本 #!/bin count=`grep "sh /usr/local/sbin/iptables.sh" /var/spo ...