搭建本地环境: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. 2.docker machine 创建 包含 docker 的 linux 虚拟机

    1. 启动 从https://github.com/boot2docker/boot2docker/releases下载iso到~/.docker/machine/cache/里 docker-mac ...

  2. 最大连续子序列(DP)

    Description 给定K个整数的序列{ N1, N2, ..., NK },其任意连续子序列可表示为{ Ni, Ni+1, ..., Nj },其中 1 <= i <= j < ...

  3. 画张自己能理解的dotnet core 微服务图

  4. 吴裕雄--天生自然 PYTHON3开发学习:正则表达式

    import re print(re.match('www', 'www.runoob.com').span()) # 在起始位置匹配 print(re.match('com', 'www.runoo ...

  5. ZJNU 1138 - 小兔的棋盘——中级

    二维图的动态规划因为不能穿越对角线,则选取对角线的一边dp即可选取对角线右下侧则x轴上每个点只能由其左侧的点走过去(只有1条)对角线上的点只能由对角线下方的点走过去其他点可以由左侧和下侧两种方式到达因 ...

  6. Image.FromStream(ms) 提示参数无效

    说明ms有问题,首先确保有读到数据,这种情况是保存到库的时候出错的. 原来你可能是这样写的: MemoryStream stream = new MemoryStream();PictureBox1. ...

  7. 必应翻译:让Windows上的翻译不再是难事

    文章译自:Translations Made Easy on Windows 比方说今年夏天你想出国旅行,计划去一趟德国.你的行程很丰富:参观慕尼黑和柏林,乘坐游船沿莱茵河而下,再品尝几串摩泽尔的葡萄 ...

  8. 02-信贷路由项目rose框架拆分dubbo

    项目架构和 rose 框架搭建见  https://www.cnblogs.com/yuanpeng-java/p/9835984.html 1.dubbo 框架架构及组成 2.注册中心安装及配置 h ...

  9. string 转化xml && xml转化为string

    一.使用最原始的javax.xml.parsers,标准的jdk api // 字符串转XML [java] view plaincopyprint? String xmlStr = \". ...

  10. 【SpringCloud】Eureka入门与原理

    为了开发效率高效和业务逻辑清晰,越来越多的项目采用分布式系统.分布式最重要的就是注册中心了.Eureka是SpringCloud原生提供的注册中心,来look一波吧. 超光速入门 服务端 引入依赖: ...