关于github:效率为王超详细-Hexo-Github-Pages-博客搭建教程

52次阅读

共计 4298 个字符,预计需要花费 11 分钟才能阅读完成。

前言

当初市面上曾经有许多博客了,比方 CSDN、掘金、博客园、简书等等。咱们能够间接在下面发表内容,而且交互比拟人性化,而且也能被搜索引擎检索到。然而总归是他人的平台,常常会受限,因而咱们就心愿能有本人的博客。之前也尝试过搭建过不同的博客类型,折腾了不少工作,最终决定定型,采纳 Hexo + Github Pages 的形式。明天就带大家一起来搭建本人的博客。因为是采纳 Hexo + Github Pages 的形式,所以都是收费的,只是须要有肯定的入手能力!

Hexo 简介

Hexo 是一个疾速、简洁且高效的动态博客框架。Hexo 应用 Markdown(或其余渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成动态网页。咱们只须要通过 Markdown 语法写好本人的博客内容,而后通过简略的命令就可能将生成的网页上传到 Github,而后大家都能够来拜访你的网页了。既不便了本人,也给了本人一个展现本人成绩的平台,是不是两全其美。

搭建步骤

搭建之前,须要做一些筹备工作,首先须要确保你的电脑上曾经上装置好了 Git 和 Node.Js,而后能力开始装置 Hexo,那么首先咱们先来看看如何筹备这这些环境。

Git

装置

  1. Window:下载并装置
  2. macOS:下载并装置
  3. Linux(Debian,Ubuntu)sudo apt-get install git-core
  4. Linux(Fedora、RedHat、CentOS)sudo yum install git-core

设置

装置胜利后,将 git 与 GitHub 账号绑定,右键关上 Git Bash,而后设置配置信息:

# 配置用户名和邮箱
git config --global user.name "github 用户名"
git config --global user.email "github 注册邮箱"

比方我的配置就是:

git config --global user.name "cunyu1943"
git config --global user.email "747731461@qq.com"

接着生成 ssh 密钥文件,输出如下命令后间接三次回车即可,个别不须要设置明码;

# 生成 ssh 密钥
ssh-keygen -t rsa -C "github 注册邮箱"

我生成秘钥的命令:

ssh-keygen -t rsa -C "747731461@qq.com"

个别执行上述命令之后,会生成 id_rsaid_rsa.pub 两个文件,前者是咱们公有的,而后者则是对外开放的。接着找到生成的 .ssh 的文件夹中的 id_rsa.pub 密钥,将内容复制;

而后关上 GitHub-Settings-Keys 页面,创立一个新的 SSH key,填写 TitleKeyTitle 能够随便,而 Key 的内容则是咱们方才复制的 id_rsa.pub 中的内容,最初点击 Add SSH key 即可;

Node.Js 装置

装置

去官网下载最新的稳定版 Node.JS,个别举荐 64 位(大家应该当初用的电脑根本都是 64 位的吧),装置的话很简略,根本就是下一步下一步点击就好了。如果还是不晓得如何装置,能够参考我的另一篇博客:Windows 下 Node.js 的装置(多图版)

验证

装置实现后,要查看咱们是否装置胜利,能够关上命令提示符(Win + R),输出 cmd 关上控制台,输出如下命令,如果呈现对应版本号,阐明装置胜利了;

node -v
npm -v

设置

因为下载包是从国外服务器,所以速度较慢,因而咱们举荐用阿里的国内镜像进行设置;

npm config set registry https://registry.npm.taobao.org

Hexo 装置

在你的硬盘上找个地儿,用来寄存你的博客文件,比方我的就在 D:personalFiles/github/blog,这个文件夹你能够依据本人的爱好来设置。而后从命令台进入以后文件夹,接下来就是装置过程了;

  1. 首先装置 Hexo
npm i hexo-cli -g

  1. 新建一个文件夹用于寄存你的博客,比方我的是 blog,而后进入该文件夹,并用如下命令进行初始化并装置必备组件;
hexo init .
npm install

  1. 初始化后,目录构造如下;
.
├── _config.yml # 网站配置信息
├── package.json # 应用程序信息
├── scaffolds # 模板文件夹
├── source # 寄存用户资源
|   ├── _drafts
|   └── _posts
└── themes # 主题文件夹
  1. 而后输出如下命令,而后在浏览器中关上 http://localhost:4000
# 新建博客
hexo new "博客名"
# 生成动态网页
hexo g
# 关上本地服务器
hexo s

而后就能够看到如下的界面,不过我的是通过批改过的,所以和你的会不一样。

Github 集体仓库

实现下面的步骤之后,咱们就能在本地进行预览了,不过咱们如果想要公布到网上供他人看的话,那就得利用 Github Pages 的性能了,下边就来介绍如何联合 Hexo + Github Pages,将咱们的博客推送到网上去,不便大家在任何中央拜访!

首先你得有个 GitHub 账号,如果没有的,请出门 右转 先去注册个账号;

有了账号之后,新建一个仓库,而且得确保你的仓库是 public,你要搞个 private,谁能拜访的了???同时,仓库名肯定要是:

用户名.github.io

用户名.github.io

用户名.github.io

这个用户名倡议不要太简单,然而又要能体现你集体特点,因为后续让他人拜访你的博客时,就要通过 https:// 用户名.github.io 这个域名来拜访。比方我的用户名是 cunyu1943,所以我的仓库就是 cunyu1943.github.io:

部署到 Github

实现下面的步骤后,你应该能在本地进行预览了,接下来就是推送网站到 Github Pages 了,而后咱们就能被其他人拜访了。

只须要在咱们方才的博客根目录中的站点配置文件 _config.yml,设置为你的集体仓库名即可:

实现上述步骤之后,次要应用如下命令,就能将咱们本地的内容推送到近程 GitHub 仓库了,而后在浏览器中拜访:

https:// 用户名.github.io

比方我的博客 村雨遥的博客;

hexo clean
hexo g
hexo d

Gitee 集体仓库

下面说完部署到 Github,接下来就说说怎么部署到 Gitee,老规矩,首先你得须要一个 Gitee 账号,如果没有的,出门 右转 先去注册个账号。

而后新建一个仓库,同样有几点须要留神的:

  1. 保障你的仓库是 public
  2. 仓库名是 你的用户名 ,这一点和 Github 略有不同,不须要是 用户名.gitee.io

比方我的用户名是 cunyu1943,所以我的仓库名就是 cunyu1943。

部署到 Gitee

实现下面的步骤后,你应该能在本地进行预览了,接下来就是推送网站到 Gitee Pages 了,而后咱们就能被其他人拜访了。这里须要留神的是,Gitee Pages 不像 Github Pages 会自动更新,它须要你每次推送后,去更新一下,如果想要自动更新,就须要开明 Gitee 的会员。

而后须要在咱们方才的博客根目录中的站点配置文件 _config.yml,设置为你的集体仓库名即可:

实现上述步骤之后,次要应用如下命令,就能将咱们本地的内容推送到近程 Gitee 仓库了,去手动更新 Gitee Pages 后,而后在浏览器中拜访:

https:// 用户名.gitee.io

如何写新博客并推送到近程

通过下面的步骤后,你的博客应该就曾经搭建胜利,而且能通过 https:// 用户名.github.io 的形式进行拜访了。接下来如果咱们要发一篇新的博客内容,又应该怎么办呢?接下来就具体讲一下如何操作。

  1. 首先进入博客所在文件夹,而后右键进入控制台,用如下命令进行创立新的文章;
hexo n "博客题目名"

  1. 接着在 blog/source/_posts 目录下应该就会有创立好的以文章题目名命名的 Markdown 文件;

  1. 接着关上该文件,编写你本人想要的内容即可;

  1. 接着在控制台应用如下命令,将其推送到近程 GitHub 仓库,等过一会儿之后,拜访即可看到方才推送的新文章了!
hexo g
hexo d

如何绑定自定义域名

通过 用户名.github.io 的形式来拜访总归是有些不不便,如果咱们须要本人的共性域名,又应该如何设置呢?那么在此之前,你须要有一个曾经备案好的域名,如果没有的话,请到阿里云、腾讯云等厂商购买本人的域名,而后通过该平台备案,而后增加两条解析记录,以我的腾讯云为例:

备好案并设置解析之后,在 Github 的博客我的项目中,顺次点击 Settings->Pages,而后在 Custom domain 增加你的域名即可,最初 Save 即可,此时你的博客根目录下应该会多一个 CNAME 的文件,而后你就能够通过本人的域名来拜访你的博客了。

当然,有时候可能通过下面的设置后,博客根目录下不会呈现名为 CNAME 的文件,如果没有,咱们能够通过在本地博客 /source 目录下手动建设一个 CNAME 文件(无后缀),而后把你的域名填进去并保留,最初顺次执行如下命令将设置上传到 Github 即可 ~

hexo g
hexo d

比方我的域名为 cunyu1943.site,通过设置之后,咱们就能够通过 https://cunyu1943.site 来拜访我的博客了。

丑化

通过下面的设置之后,咱们只是失去了一个简略地博客,如果你也想让你的博客像我的一样酷(zhuang)炫(bi),就要用到主题了,我采纳的主题是 hexo-theme-matery,一个基于资料设计和响应式设计而成的主题,而且对于如何设置它也有非常具体的文档,如果存在不懂得问题,还能够及时提交 issue,作者回复也非常及时。

如果你不想过于折腾,那么你实现下面的步骤之后,也能够间接采纳我的博客源代码,而后把里边的集体配置改一下就 ok 了,我的博客源码地址:hexo-theme-matery-personal

大家间接下载下来,而后把 node_modules.zip 进行解压,而后批改其中的局部配置(也就是你的 Github、网名啥的呀个人信息),次要是批改根目录下的 _config.yml_config.hexo-theme-matery.yml,而后就能够间接写博客了。当然,前提是你把环境啥的都搭建好了。

PS:我对于配置文件中的某些要害信息进行了暗藏,比方 gitalkgitmentValinebaiduAnalytics 等,这些须要你本人去注册并获取本人的信息,请记得批改,否则可能导致失败。

总结

至此,咱们的博客就搭建实现了,是不是很简略,连忙去试试吧!

对于文中不分明的中央,欢送留言,我会在看到的第一工夫回复你!

正文完
 0