Github pages+HEXO+域名绑定搭建个人博客

最新推荐文章于 2024-05-12 22:08:12 发布

Cengineering

最新推荐文章于 2024-05-12 22:08:12 发布

阅读量2k

点赞数 2

分类专栏： Web前端文章标签： github hexo 个人博客搭建

本文链接：https://blog.csdn.net/Cengineering/article/details/78803856

版权

Web前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1.搭建环境

这里写图片描述

windows 7(64 位)
$ git-2.15.1-64-bit
$ node-v8.9.3-x64

如果上述软件已安装，请跳过。没有的，下载安装

1.git 下载安装：（https://git-for-windows.github.io/）

这里写图片描述

安装好后查看版本：git version

这里写图片描述

2.Node.js下载安装（https://nodejs.org/en/download/）

Hexo是基于nodeJS环境的静态博客，里面的npm工具很有用

这里写图片描述

安装好后查看版本：node -v

这里写图片描述

3.安装HEXO

先创建一个文件夹用来存放blog,mkdir hexo,然后cd hexo
安装hexo命令：npm i -g hexo
安装完成后，查看版本：hexo -v
npm ERR! registry error parsing json 错误

可能需要设置npm代理，执行命令

npm config set registry http://registry.cnpmjs.org

hexo:command not found

删除刚刚安装的npm目录，重新执行命令npm i -g hexo
初始化hexo:hexo init ，初始化完成后会在hexo文件夹下生成建blog的必要文件。
解释一下：
- node_modules：是依赖包
- public：存放的是生成的页面
- scaffolds：命令生成文章等的模板
- source：用命令创建的各种文章
- themes：主题
- _config.yml：整个博客的配置
- db.json：source解析所得到的
- package.json：项目所需模块项目的配置信息

2.本地测试

现在我们要搭建本地的博客测试一下。

在hexo文件夹下执行命令：

hexo generate 或者hexo g #生成静态页面至public目录
hexo server 或者hexo s #开启预览访问端口（默认端口4000，’ctrl + c’关闭server）

-问题
执行hexo server提示找不到该指令
解决办法：
在Hexo 3.0 后server被单独出来了，需要安装server，安装的命令如下：

npm install hexo -server --save

按照提示，在浏览器搜索框中输入http://localhost:4000/,我们就可以看到本地博客的模样啦。这只是本地博客哟，别人时看不到的，要想其他人通过网络访问你的博客，接下来需要把它部署到GitHub上去。
这里写图片描述

这个只是HEXO内置的一个主题，如果大家觉得不喜欢，可以去网上搜一搜其它的主题，至于后面的怎么弄，我目前也不清楚，因为今天才搭起来的博客就写这篇文章了。后面的话会给大家更新这块的。

3.Git Hub准备工作

1. 注册github帐号 https://github.com/

2. 创建new repo
这里写图片描述

3. 填写repo信息
这里写图片描述
这里请一定保证命名格式跟图中一致. “yourname”和owner的名字要相同如果不同的话，比如说图中的owner是ekoopgj，repository name是yourname.github.io。到最后你访问你的github pages的域名就是https://ekoopgj.github.io/yourname.github.io，但是你把yourname改成ekoopgj的时候，你的网页博客地址就是https://ekoopgj.github.io了。
这里有一个大坑：当你的github pages域名为https://ekoopgj.github.io/yourname.github.io你在windows的CMD命令行里ping ekoopgj.github.io/yourname.github.io是ping不通的，但如果你把yourname设置成onwer一致，你的github pages域名就是https://ekoopgj.github.io，在CMD下ping ekoopgj.github.io是可以ping通的。如果你连域名都ping不同，你后面就不能将自己的域名跟github pages绑定了，因为DNS服务器无法解析你的域名。
其实 https://ekoopgj.github.io/yourname.github.io可以通俗的理解为你将会把你的blog文件放在根目录是ekoopgj.github.io的yourname.github.io文件夹下。但个人觉得HEXO里面生成文件都是在github pages默认的根目录下来引用，这里相当于把根目录设置成了ekoopgj.github.io/yourname.github.io,而不是ekoopgj.github.io/，所以网页文件在引用上就会找不到对应的文件了。会造成网页信息缺失。

4. 配置GitHub账户信息

回到git bash中敲下两条指令即可

git config --global user.name "yourname"
git config --global user.email "youremail@example.com"

这里写图片描述

5. 生成SSH密钥

在Git bash中输入ssh-keygen -t rsa -C "youremail@example.com"
这里写图片描述

可以看到我的key存在了/c/Users/ekoopgj/.ssh/目录下,这里生成了两个密钥，一个时id_rsa，这个时私有的，还有一个时id_rsa.pub,这个是共有的，接下来我们只需要复杂公有密钥的信息

这里写图片描述

然后cat id_ras.pub 将所有内容复制

这里写图片描述

登录Git hub，点击setting>SSH and GPG keys

这里写图片描述

最后点击Add SSH key，这样就把公钥导入到GitHub上去啦

在Git bash中输入指令验证是否导入成功：

ssh -T git@github.com

这里写图片描述

倒入成功！

6.修改_config.yml
打开存放博客文件下的_config.yml文件，修改文件里面的配置。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:ekoopgj/ekoopgj.github.io.git
  branch: master

注意每行冒号后面有一个空格，务必保证repo的格式正确

7.上传到Git_Hub

先安装npm install hexo-deployer-git --save（这样你才能将写好的文章部署到github上让别人浏览到）
执行以下命令：(建议每次都按照下面的执行顺序来）
- hexo clean
- hexo generate
- hexo deploy
  这个过程中会出现 hexo warn…这个是可以忽略的，但是出现了hexo ERROR后，就得自行百度了，找到答案处理完error后，按照刚才的命令执行顺序再试一遍。
  
  出现INFO Deploy done: git就ok了。
在浏览器中输入http://yourgithubname.github.io，就可以看到你的个人博客了。

3.绑定个人域名

首先购买一个域名，我是在阿里云的万网上面买的，然后还买了一个云虚拟主机（买的时候免费提供DNS解析服务，后来才知道其实不用买云虚拟主机了，因为云虚拟主机就是提供了一个网络文件夹让你通过FTP把本地的网页文件传上去，实现网页显示。有了Git Hub,一样可以实现这种功能，还是免费的，但是不买云虚拟主机的话就得买DNS解析服务，这样一套下来价格就会便宜很多。）
有了DNS解析服务后，在windows的CMD窗口ping yourgithubname.github.io ，你就知道你的github pages的IP了。这里我购买的域名是317cpan.com

3.在DNS server中添加你的github pages的ip解析。不会的话直接点新手指导。

这里写图片描述

4.解析完成后在你的本地博客文件夹中的source文件夹下新建一个CNAME文件，写上你的域名，格式为：xxx.com，然后再部署一遍

hexo clean
hexo g
hexo deploy

这里写图片描述
或者直接在github你的博客repo下新建一个CNAME文件，写上你的域名。

5.在Git Hubpages页面设置一下你绑定的custom domain.在custom domain下填写上你的域名，然后点击save.在GitHub pages第二行出现your site is piblished at http://317cpan.com/（这是我的）就大功告成了。
这里写图片描述

后记

接下来你可以对你的博客页面和功能进行设计，如果水平有限可以直接去学习一下怎么更换hexo主题 https://segmentfault.com/a/1190000002632530

Hexo-theme：https://hexo.io/themes/
Hexo-github-theme-list：https://github.com/hexojs/hexo/wiki/Themes
有那些好看的hexo主题？：http://www.zhihu.com/question/24422335

想自己手敲代码进行设计的话可以先看看Head First HTML与CSS第2版入门web前端
然后下载 IntelliJ IDEA,前端开发利器，如果你知道如何破解的话，请告诉我。如果你是土豪买了正版，觉得这篇文章写得还不错，请赏我一个注册码。
碰到问题的随时留言，一天内回复。

Cengineering

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Github pages+HEXO+域名绑定搭建个人博客

1.搭建环境windows 7(64 位)$ git-2.15.1-64-bit$ node-v8.9.3-x64 如果上述软件已安装，请跳过。没有的，下载安装1.git 下载安装：（https://git-for-windows.github.io/）安装好后查看版本：git version2.Node.js下载安装（https://nodejs.org/en/download/）
复制链接

扫一扫