GitHub+Hexo 搭建个人博客史上最详细教程

搭建技术 hexo 3-hexo nodejs GitHub
创建时间:
字数:2.8k 阅读: 评论:
  1. GitHub+Hexo 搭建个人网站详细教程
  2. Hexo简介
    1. 第一部分
      1. Hexo简介
      2. Hexo搭建步骤
    2. 1.安装Git
    3. 2. 安装nodejs
    4. 3. 安装hexo
    5. 4. GitHub创建个人仓库
    6. 5. 生成SSH添加到GitHub
    7. 6. 将hexo部署到GitHub
    8. 7. 设置个人域名

GitHub+Hexo 搭建个人网站详细教程

花了几天搭建了个网站，先上链接，欢迎来访：Zevs的个人博客

​ 随着互联网浪潮的翻腾，国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷。然后，如果你是一个不甘寂寞的程序猿（媛），是否也想要搭建一个属于自己的个人网站，如果你曾经或者现在正有这样的想法，请跟随这篇文章发挥你的Geek精神，让你快速拥有自己的博客网站，写文章记录生活，享受这种从0到1的过程。

你见过的最棒的个人博客界面是什么样的？

现在市面上的博客很多，如CSDN，博客园，简书等平台，可以直接在上面发表，用户交互做的好，写的文章百度也能搜索的到。缺点是比较不自由，会受到平台的各种限制和恶心的广告。

而自己购买域名和服务器，搭建博客的成本实在是太高了，不光是说这些购买成本，单单是花力气去自己搭这么一个网站，还要定期的维护它，对于我们大多数人来说，实在是没有这样的精力和时间。

那么就有第三种选择，直接在 github page 平台上托管我们的博客。这样就可以安心的来写作，又不需要定期维护，而且hexo作为一个快速简洁的博客框架，用它来搭建博客真的非常容易。

Hexo简介

img

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

教程分三个部分:

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

第一部分

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

Hexo简介

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

Hexo搭建步骤

  1. 安装Git
  2. 安装Node.js
  3. 安装Hexo
  4. GitHub创建个人仓库
  5. 生成SSH添加到GitHub
  6. 将hexo部署到GitHub
  7. 设置个人域名
  8. 发布文章

1.安装Git

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

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

2. 安装nodejs

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

windows：nodejs选择LTS版本就行了。

安装完后，打开命令行。检查一下有没有安装成功

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

node -v
npm -v

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无法访问的错误，在hosts文件中加入下列IP，保存即可生效

windows下路径为：C:\Windows\System32\drivers\etc\hosts
Linux下路径：/etc/hosts

#github
192.30.253.113 github.com
192.30.253.113 github.com
192.30.253.118 gist.github.com
192.30.253.119 gist.github.com

登录到GitHub,如果没有GitHub帐号，使用你的邮箱注册GitHub帐号：Build software better, together 点击GitHub中的New repository创建新仓库，仓库名应该为：用户名.http://github.io 这个用户名使用你的GitHub帐号名称代替，这是固定写法，比如我的仓库名为：Zevs6.github.io

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

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

点击create repository即可完成创建。（恭喜你离成功又近了一步）

5. 生成SSH添加到GitHub

回到你的git bash中，

输入一下命令，这里的yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。

git config --global user.name "yourname"
git config --global user.email "youremail"

可以用以下两条，检查一下你有没有输对

git config user.name
git config user.email

然后创建SSH,一路回车

ssh-keygen -t rsa -C "youremail"

这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。

1.png

ssh，简单来讲，就是一个秘钥，其中，id_rsa是你这台电脑的私人秘钥，不能给别人看的，id_rsa.pub是公共秘钥，可以随便给别人看。把这个公钥放在GitHub上，这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。

2.png

将公钥添加到GitHub上

  • 详细教程请百度搜索
  • 点击用户头像->settings->SSH and GPG keys ->New SSH key
  • 将id_rsa.pub中的内容复制到key->文本框中，然后点击Add SSH key(添加SSH)按钮

3.png

4.png

5.png

Title为标题，任意填即可，将刚刚复制的id_rsa.pub内容粘贴进去，最后点击Add SSH key。
在Git Bash中检测GitHub公钥设置是否成功，输入 ：

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://Zevs.github.io 就可以看到你的博客了，是不是很开心很兴奋啊，要控制住自己嘻嘻嘻嘻!
  • 清除gitbash中命令clear
  • 我们已部署成功http://yourname.github.io 这个网站看到你的博客了！！（yourname换成你的仓库名称哦！）

7. 设置个人域名

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

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

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

点解析进去，添加解析。

包括添加三条解析记录，192.30.252.153是GitHub的地址，你也可以ping你的 Zevs6.github.io 的ip地址，填入进去。第三个记录类型是CNAME，CNAME的记录值是：你的用户名.http://github.io 这里千万别弄错了。

​ 第二步，登录GitHub，进入之前创建的仓库，点击settings，设置Custom domain，输入你的域名点击save保存。

​ 第三步，进入本地博客文件夹 ，进入blog/source目录下，创建一个记事本文件，输入你的域名，对，只要写进你自己的域名即可。如果带有www，那么以后访问的时候必须带有www完整的域名才可以访问，但如果不带有www，以后访问的时候带不带www都可以访问。所以建议，不要带有www。这里我还是写了www(不建议带有www):

保存，命名为CNAME ，注意保存成所有文件而不是txt文件。

完成这三步，进入blog目录中，右键打开gitbash，依次输入：

hexo clean
hexo g
hexo d

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

接下来你就可以正式开始写文章了。（hexo n “博客名字”）

hexo new newpapername

然后在source/_post中打开markdown文件，就可以开始编辑了。当你写完的时候，再执行如下代码：

hexo clean
hexo g
hexo d

通过带有预览样式的Markdown编辑器实时预览书写的博文样式，也可以通过命令 hexo s –debug 在本地浏览器的localhost:4000 预览博文效果。写好博文并且样式无误后，通过hexo g、hexo d 生成、部署网页。随后可以在浏览器中输入域名浏览。

到这里感觉小伙伴的观看，相信你已经完成了自己的个人博客！欢迎在下方评论区留言哦！

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以加QQ（2602138376）

赏

文章标题:GitHub+Hexo 搭建个人博客史上最详细教程

文章字数:2.8k

本文作者:Zevs

发布时间:2019-08-14, 10:35:41

最后更新:2019-09-12, 20:29:38

原始链接:http://zhsh666.xyz/2019/08/14/GitHub-Hexo-搭建个人博客史上最详细教程/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

©2019 ®Zevs | ✿网站字词总数：字

√本站访问人数：人次 | ◎本站总访问量：次

目录
×

喜欢就点赞,疼爱就打赏

相册 图床 主题切换