在本地搭建Hexo博客框架,并部署到Github。

作者: Fuoca 发布于 2020-07-24 更新于 2020-09-3 字数统计 2588字 阅读时长 ≈ 8分37秒

什么是 Hexo

Hexo 是一个快速、简单且强大的部落格框架。能够使用 Markdown 语法来新增文章,快速渲染你的文章,有强大的外挂系统及丰富的扩充性,简单易用,让你可以专注与写作中,不被複杂的操作影响写作的体验,对于习惯使用 Markdown 纪录内容的人可说是一大福音,可以套用主题让你的网页变得更加漂亮,重点来了!Hexo 是由台湾人制作的,官方文件都有中文语系的支援,更能降低入门的门槛。

官网: http://hexo.io

GitHub:https://github.com/hexojs/hexo

什么是 GitHub ?

GitHub 是通过 Git 进行版本控制的软件源代码托管服务,由 GitHub 公司(曾称 Logical Awesome)的开发者 Chris Wanstrath、PJ Hyett 和 Tom Preston-Werner 使用 Ruby on Rails 编写而成。(维基百科)

官网:https://github.com

1、前言

使用Github Pages服务搭建博客的好处有:

  1. 全是静态文件,访问速度快;
  2. 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台;
  3. 可以随意绑定自己的域名,不仔细看的话根本看不出来你的网站是基于Github的;
  4. 数据绝对安全,基于Github的版本管理,想恢复到哪个历史版本都行;
  5. 博客内容可以轻松打包、转移、发布到其它平台;
  6. 等等;

1.1. 准备工作

在开始一切之前,你必须已经:

  • 有一个Github账号,没有的话去注册一个;
  • 安装了node.jsnpm,并了解相关基础知识;
  • 安装了git for windows(或者其它git客户端)

本文所使用的环境:

2、搭建github博客

2.1 Github仓库创建

新建一个名为你的用户名.github.io的仓库,比如说,如果你的github用户名是test,那么你就新建test.github.io的仓库(必须是你的用户名,其它名称无效),将来你的网站访问地址就是 http://test.github.io 了,是不是很方便?

由此可见,每一个Github账户最多只能创建一个这样可以直接使用域名访问的仓库。

几个注意的地方:

  1. 注册的邮箱一定要验证,否则不会成功;
  2. 仓库名字必须是:username.github.io,其中username是你的用户名;
  3. 仓库创建成功不会立即生效,需要过一段时间,大概10-30分钟,或者更久,我的等了半个小时才生效;

创建成功后,默认会在你这个仓库里生成一些示例页面,以后你的网站所有代码都是放在这个仓库里啦。

2.2 安装hexo基本框架

第一步:新建文件夹

这一步是为了给你的博客找一个合适的位置。新建的文件夹的命名是随意的。如下图。

第二步:使用VSCode打开文件夹并新建终端。

打开VSCode->打开文件夹->选择文件夹->点击打开

点击菜单栏中的终端->新终端

第三步:安装hexo基础框架

第二步完成后,会出现一个命名窗口。输入如下命令:

#第一条   这是安装hexo的基础框架
npm install -g hexo-cli

#第二条   这是初始化hexo框架 这个可能会比较慢
hexo init

#第三条 安装所需要的组件
npm install

#第四条 编译生成静态页面
hexo g

#第五条 启动本地服务
hexo s

第五条命名执行完毕后,可以首次体验一下,如下图

浏览器中的效果如下:

2.3 博客关联到Github仓库

在2.1的时候,我们已经将仓库创建好了,这里就需要用到了。

  • 首先我们要编辑图中_config.yml文件,这是博客的主要配置文件,在下面一部分,我们要频繁使用这个配置文件,这里先编辑一步,为了管理GitHub账号。
  • 打开文件之后,在文档最后,输入红色大框中的内容,只需要将你的username替换就可以了,其他无需更改。

然后在目录中执行

# 产生静态网页
hexo g
# 部署到GitHub page上
hexo d

然后你需要输入你GitHub的用户名和密码,这样你就就可以使用你的仓库名去访问你的博客主页了。为了每一次部署不必一直输入密码,我们可以生成秘钥,然后提交到GitHub,进行关联,那么你下次就不需要再输入密码了

  • 关联GitHub账号,免密提交
# 用你注册GitHub时的邮箱号,进行秘钥生成
cd ~
ssh-keygen -t rsa -C "xxxxxxx@qq.com"
# 系统就会生成一个隐藏文件夹.ssh
cd .ssh
ls
# 复制公钥
vim id_rsa.pub

点击Setting的按钮,进入设置,然后点击SSH and GPG keys,创建新的SSH,将之前复制的公钥黏贴,提交,OK。

2.4 绑定域名

当然,你不绑定域名肯定也是可以的,就用默认的 xxx.github.io 来访问,如果你想更个性一点,想拥有一个属于自己的域名,那也是OK的。

首先你要注册一个域名,域名注册以前总是推荐去godaddy,现在觉得其实国内的阿里云也挺不错的,价格也不贵,毕竟是大公司,放心!

绑定域名分2种情况:带www和不带www的。

域名配置最常见有2种方式,CNAMEA记录,CNAME填写域名,A记录填写IP,由于不带www方式只能采用A记录,所以必须先ping一下你的用户名.github.ioIP,然后到你的域名DNS设置页,将A记录指向你ping出来的IP,将CNAME指向你的用户名.github.io,这样可以保证无论是否添加www都可以访问,如下:

然后到你的Github项目根目录新建一个名为CNAME的文件(无后缀),里面填写你的域名,加不加www看你自己喜好,因为经测试:

  • 如果你填写的是没有www的,比如 fuocu.cn,那么无论是访问 http://www.fuocu.cn 还是 http://fuocu.cn ,都会自动跳转到 http://fuocu.cn
  • 如果你填写的是带www的,比如 www.fuocu.cn ,那么无论是访问 http://www.fuocu.cn 还是 http://fuocu.cn ,都会自动跳转到 http://www.fuocu.cn
  • 如果你填写的是其它子域名,比如 abc.fuocu.cn,那么访问 http://abc.fuocu.cn 没问题,但是访问 http://fuocu.cn ,不会自动跳转到 http://abc.fuocu.cn
来源:FuocaのBlog,欢迎分享,欢迎评论,( QQ:3283906509 )
本站资源有的自互联网收集整理,如果侵犯了您的合法权益,请联系本站我们会及时删除。
本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。
JetBrains全系列软件激活教程激活码以及JetBrains系列软件汉化包
<< 上一篇 2020年7月24日 pm5:38
Mac系统的访达Finder侧边栏目录的英文转中文
下一篇 >> 2020年7月27日 pm4:24

发表评论

  • 2用户数(个)
  • 18资源数(个)
  • 0本周更新(个)
  • 0今日更新(个)
  • 293稳定运行(天)

提供最优质的资源集合

立即查看 了解详情