个人blog---hexo史上最全搭建教程(一)(内容较长,谨慎阅读!)

文章 HexoBlog干货
2 / 2180

民间有传言,没有手撸过个人网站的程序员不是一个好的前端开发工程师,可是!强撸灰飞湮灭!为了自己的身体健康,还是少撸为妙!不要996.ICU,也不要 96,完全免费,直接带回家。通过 hexo(https://hexo.io/),可以快速构建个人博客,并搭建到 github 上供他人访问,三秒真男人,开始吧! ————————————————————————————————

Hexo 简介

  • hexo 可以理解为是基于 node.js 制作的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在 GitHub 和 Coding 上,是搭建博客的首选框架。不是我们理解的一个开源的博客系统。其中的差别,有点意思。
  • hexo 正常来说,不需要部署到我们的服务器上,我们的服务器上保存的,其实是基于在 hexo 通过 markdown 编写的文章,然后 hexo 帮我们生成静态的 html 页面,然后,将生成的 html 上传到我们的服务器。简而言之:hexo 是个静态页面生成、上传的工具。 大家可以进入 hexo 官网进行详细查看,因为 Hexo 的创建者是台湾人,对中文的支持很友好,可以选择中文进行查看。

教程分三个部分,

第一部分:hexo 的初级搭建还有部署到 github page 上,以及个人域名的绑定。 第二部分:hexo 的基本配置,更换主题,实现多终端工作,以及在 coding page 部署实现国内外分流. 第三部分:hexo 添加各种功能,包括搜索的 SEO,阅读量统计,访问量统计和评论系统等。

第一部分 hexo 的初级搭建还有部署到 github page 上,以及个人域名的绑定。

Hexo 简介 Hexo 是一款基于 Node.js 的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在 GitHub 和 Coding 上,是搭建博客的首选框架。大家可以进入 hexo 官网进行详细查看,因为 Hexo 的创建者是台湾人,对中文的支持很友好,可以选择中文进行查看。

Hexo 搭建步骤: 安装 Git 安装 Node.js 安装 Hexo GitHub 创建个人仓库 生成 SSH 添加到 GitHub 将 hexo 部署到 GitHub 设置个人域名 发布文章

1. 安装 Git

Git 是目前世界上最先进的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。也就是用来管理你的 hexo 博客文章,上传到 GitHub 的工具。Git 非常强大,我觉得建议每个人都去了解一下。廖雪峰老师的 Git 教程写的非常好,大家可以了解一下。Git 教程

windows:到 git 官网上下载, Download git, 下载后会有一个 Git Bash 的命令行工具,以后就用这个工具来使用 git。

linux:对 linux 来说实在是太简单了,因为最早的 git 就是在 linux 上编写的,只需要一行代码 sudo apt-get install git

安装好后,用git --version 来查看一下版本

2. 安装 nodejs

Hexo 是基于 nodeJS 编写的,所以需要安装一下 nodeJs 和里面的 npm 工具。

windows 装教程:node 安装。检查一下有没有安装成功

顺便说一下,windows 在 git 安装完后,就可以直接使用 git bash 来敲命令行了,不用自带的 cmd,cmd 有点难用。

3. 安装 hexo

前面 git 和 nodejs 安装好后,就可以安装 hexo 了,你可以先创建一个文件夹 blog,然后cd到这个文件夹下(或者在这个文件夹下直接右键git bash打开)。 输入命令npm install -g hexo-cli 依旧用hexo -v查看一下版本

至此就全部安装完了。接下来初始化一下 hexo: hexo init myblog

这个 myblog 可以自己取什么名字都行,然后: cd myblog // 进入这个 myblog 文件夹 npm install 新建完成后,指定文件夹目录下有:

  • node_modules: 依赖包
  • public:存放生成的页面
  • scaffolds:生成文章的一些模板
  • source:用来存放你的文章
  • themes:主题
  • ** _config.yml: 博客的配置文件 **

hexo g hexo server 打开 hexo 的服务,在浏览器输入 localhost:4000 就可以看到你生成的博客了。过程一定要快,凉了就不好吃了! 大概长这样:
使用 ctrl+c 可以把服务关掉。

4. GitHub 创建个人仓库

首先,你先要有一个 GitHub 账户,右转去注册一个吧。

注册完登录后,在 GitHub.com 中看到一个 New repository,新建仓库

创建一个和你用户名相同的仓库,后面加. github.io,只有这样,将来要部署到 GitHub page 的时候,才会被识别,也就是 xxxx.github.io,其中 xxx 就是你注册 GitHub 的用户名。我这里是已经建过了。

点击 create repository。

5. 生成 SSH 添加到 GitHub

回到你的 git bash 中 git config --global user.name "yourname" git config --global user.email "youremail" 这里的 yourname 输入你的 GitHub 用户名,youremail 输入你 GitHub 的邮箱。这样 GitHub 才能知道你是不是对应它的账户。

可以用以下两条,检查一下你有没有输对 git config user.name git config user.email 然后创建 SSH, 一路回车 ssh-keygen -t rsa -C "youremail" 这个时候它会告诉你已经生成了. ssh 的文件夹。在你的电脑中找到这个文件夹。 ssh,简单来讲,就是一个秘钥,其中,id_rsa 是你这台电脑的私人秘钥,不能给别人看的,id_rsa.pub 是公共秘钥,可以随便给别人看。把这个公钥放在 GitHub 上,这样当你链接 GitHub 自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过 git 上传你的文件到 GitHub 上。

而后在 GitHub 的 setting 中,找到 SSH keys 的设置选项,点击 New SSH key 把你的 id_rsa.pub 里面的信息复制进去。 在 gitbash 中,查看是否成功 ssh -T git@github.com

6. 将 hexo 部署到 GitHub

这一步,我们就可以将 hexo 和 GitHub 关联起来,也就是将 hexo 生成的文章部署到 GitHub 上,打开站点配置文件 _config.yml,翻到最后,修改为
YourgithubName 就是你的 GitHub 账户

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

这个时候需要先安装 deploy-git ,也就是部署的命令, 这样你才能用命令部署到 GitHub。 npm install hexo-deployer-git --save 然后:

hexo clean
hexo generate
hexo deploy

其中 hexo clean 清除了你之前生成的东西,也可以不加。 hexo generate 顾名思义,生成静态文章,可以用 hexo g 缩写 hexo deploy 部署文章,可以用 hexo d 缩写

注意 deploy 时可能要你输入 username 和 password。 部署成功,过一会儿就可以在http://yourname.github.io这个网站看到你的博客了!! ————————————————

设置个人 Blog 域名,右转 RMB 注册

现在你的个人网站的地址:yourname.github.io,如果觉得这个网址逼格不太够,这就需要你设置个人域名了。但是需要花钱。

注册一个阿里云账户, 在阿里云上买一个域名, 各个后缀的价格不太一样,比如最广泛的. com 就比较贵,看个人喜好咯。

你需要先去进行实名认证, 然后在域名控制台中,看到你购买的域名。

点解析进去,添加解析。其中,192.30.252.153 和 192.30.252.154 是 GitHub 的服务器地址。
注意,解析线路选择默认,不要选境外。这个境外是后面来做国内外分流用的, 在后面的博客中会讲到。记得现在选择默认!! 登录 GitHub,进入之前创建的仓库,点击 settings,设置 Custom domain,输入你的域名XXX.com/cn自己注册 然后在你的博客文件 source 中创建一个名为 CNAME 文件,不要后缀。写上你的域名。

最后,在 gitbash 中,输入

hexo clean
hexo g
hexo d

过不了多久,再打开你的浏览器,输入你自己的域名,就可以看到搭建的网站啦!

接下来你就可以正式开始写文章了。 hexo new newpapername 然后在 source/_post 中打开 markdown 文件,就可以开始编辑了。当你写完的时候,再

hexo clean
hexo g
hexo d

就可以看到更新了。 ———————————————— 到此完结!!!

Fordkey
甄穹紫月
回复(2)
  • 回复
    甄穹紫月 2020-05-03 22:35:53

    这种结构分明还带颜色标记的文字是怎么发的 0.0

    文章编辑规范参见输入框右侧 Markdown 语法

  • 甄穹紫月 回复

    这种结构分明还带颜色标记的文字是怎么发的 0.0