Hexo+Github 博客搭建教程

阅读须知

注意,这篇文章篇幅较长, 主要针对新手,每一步很详细,所以可能会显得比较啰嗦,所以建议基础比较好小伙伴根据目录选择自己感兴趣的部分跳着看,不要文章没看,上来先喷一下!谢谢⊙o⊙。
教程内容随意复制使用,引用的话请加一个参考链接,谢谢!

前言

倒腾了一两周总算把个人博客网站完善了,目前这个版本使用应该是够了,当然还有一些优化项和功能增加后续在慢慢更新
特殊字体颜色,为代码内容和重要事项

简单使用方法

  1. 在 GitHub 创立本项目仓库
  2. 安装 Git, 安装 nodeJS
  3. 你可以直接复制一份源码到你的仓库,点击 clone 下载到本地
  4. 在本地博客仓库运行 npm i 命令安装依赖包
  5. 修改配置信息,改成自己的信息
  6. 运行命令 hexo clean(清除生成文件),hexo g(生成网页), hexo s(本地预览),hexo d(部署)
    有什么问题可以在文章最后评论区留言和讨论,喜欢请点赞,支持可打赏。

总览

教程大致分三个部分,

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

第一部分 搭建

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

Hexo 搭建步骤

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

1. 安装 Git

为了把本地的网页文件上传到 github 上面去,需要用到工具———Git 下载地址。Git 是目前世界上最先进的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。Git 非常强大,建议每个人都去了解一下。廖雪峰老师的 Git 教程写的非常好,大家可以看一下。Git 教程
windows:到 git 官网上下载.exe 文件,Download git, 安装选项还是全部默认,只不过最后一步添加路径时选择 Use Git from the Windows Command Prompt,这样我们就可以直接在命令提示符里打开 git 了。

顺便说一下,windows 在 git 安装完后,就可以直接使用 git bash 来敲命令行了,不用自带的 cmd,cmd 有点难用。
安装完成后在命令提示符中输入 git --version 来查看一下版本验证是否安装成功。

2. 安装 nodejs

Hexo 是基于 node.js 编写的,所以需要安装一下 node.js 下载地址 和里面的 npm 工具。
windows:下载稳定版或者最新版都可以 Node.js,安装选项全部默认,一路点击 Next。
最后安装好之后,按 Win+R 打开命令提示符,输入 node -vnpm -v,如果出现版本号,那么就安装成功了。

添加国内镜像源

如果没有梯子的话,可以使用阿里的国内镜像进行加速。将下面的代码输入到 Git 中运行即可
Npm config set registry https://registry.npm.taobao.org

3. 安装 Hexo

前面 git 和 nodejs 安装好后,就可以安装 hexo 了,你可以先创建一个文件夹 MyBlog,用来存放自己的博客文件,然后 cd 到这个文件夹下(或者在这个文件夹下直接右键 git bash 打开)。
比如我的博客文件都存放在 D:\myblog 目录下。
在该目录下右键点击 Git Bash Here,打开 git 的控制台窗口,以后我们所有的操作都在 git 控制台进行,就不用 Windows 自带的 cmd 了。
定位到该目录下,输入 npm install -g hexo-cli 安装 Hexo。可能会有几个报错,无视它就行。

npm install -g hexo-cli

安装完后输入 hexo -v 验证是否安装成功。
至此 hexo 就安装完了。
接下来初始化一下 hexo, 即初始化我们的网站,输入 hexo init 初始化文件夹
hexo init myblog
这个 MyBlog 文件夹,可以自己取什么名字都行,然后,接着输入 npm install 安装必备的组件

cd MyBlog 是指进入这个 MyBlog 文件夹
npm install

新建完成后,指定文件夹 MyBlog 目录下有:
node_modules: 依赖包
public:存放生成的页面
scaffolds:生成文章的一些模板
source:用来存放你的文章
themes:主题文件
_config.yml: 博客的配置文件
这样本地的网站配置也弄好啦,输入 hexo g 生成静态网页,然后输入 hexo s 打开本地服务器

Hexo g
Hexo server(或者简写:hexo s)

然后浏览器打开 http://localhost:4000/,就可以看到我们的博客啦,效果如下:

按 ctrl+c 关闭本地服务器。

4. 注册 Github 账号创建个人仓库

接下来就去注册一个 github 账号,用来存放我们的网站。大多数小伙伴应该都有了吧,作为一个合格的程序猿(媛)还是要有一个的。
打开 https://github.com/,新建一个项目仓库 New repository,如下所示:

然后如下图所示,输入自己的项目名字,后面一定要加 .github.io 后缀,README初始化也要勾上。

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

5. 生成 SSH 添加到 GitHub

生成 SSH 添加到 GitHub,连接 Github 与本地。
右键打开 git bash,然后输入下面命令:

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

这里的 yourname 输入你的 GitHub 用户名,youremail输入你 GitHub 的邮箱。这样 GitHub 才能知道你是不是对应它的账户。例如我的:

git config --global user.name "nknnn"
git config --global user.email 1598554108@qq.com

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

git config user.name
git config user.email

然后创建 SSH, 一路回车

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

ssh-keygen -t rsa -C "youremail"

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

cat ~/.ssh/id_rsa.pub

将输出的内容复制到框中,点击确定保存。
打开 github,在头像下面点击 settings,再点击SSH and GPG keys,新建一个 SSH,名字随便取一个都可以,把你的 id_rsa.pub 里面的信息复制进去。如图:

在 git bash 输入ssh -T git@github.com,如果如下图所示,出现你的用户名,那就成功了。

6. 将 hexo 部署到 GitHub

这一步,我们就可以将 hexo 和 GitHub 关联起来,也就是将 hexo 生成的文章部署到 GitHub 上,打开博客根目录下的 _config.yml 文件,这是博客的配置文件,在这里你可以修改与博客配置相关的各种信息。
修改最后一行的配置:(顶字不用输入 ,但 下三行代码 用空格 来调整代码位置 至如下显示)

deploy:
type: git
repository: https://github.com/shw2018/shw2018.github.io
branch: master

repository修改为你自己的 github 项目地址 即可,就是部署时,告诉工具,将生成网页通过 git 方式上传到你对应的链接仓库中。
这个时候需要先安装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 时可能要你输入 usernamepassword

得到下图就说明部署成功了,过一会儿就可以在http://yourname.github.io 这个网站看到你的博客了

7. 设置个人域名

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

 不过,这一步不是必要的,如果目前还不想买域名可以先跳过,继续看后面的,以后想买域名了在还看这块

首先你得购买一个专属域名,xx 云都能买,看你个人喜好了。
这篇以腾讯云为例,腾讯云官网购买:

然后实名认证后进入腾讯云控制台,点云解析进去,找到你刚买的域名,点进去添加两条解析记录,如下图所示:

然后打开你的 github 博客项目,点击 settings,拉到下面Custom domain 处,填上你自己的域名,保存:

这时候你的项目根目录应该会出现一个名为 CNAME 的文件了。如果没有的话,打开你本地博客 /source 目录,我的是 D:\myblog,新建CNAME 文件,注意没有后缀。然后在里面写上你的域名,保存。最后运行 hexo ghexo d 上传到 github。
过不了多久,再打开你的浏览器,输入你自己的专属域名,就可以看到搭建的网站啦!

8. 写文章、发布文章

首先在博客根目录下右键打开 git bash,安装一个扩展 npm i hexo-deployer-git
然后输入 hexo new post "article title",新建一篇文章。
然后打开 D:\Study\MyBlog\source\_posts 的目录,可以发现下面多了一个文件夹和一个 .md 文件,一个用来存放你的图片等数据,另一个就是你的文章文件啦。
你可以会直接在 vscode 里面编写 markdown 文件,可以实时预览,也可以用用 其他编辑 md 文件的软件的工具 编写。
编写完 markdown 文件后,根目录下输入 hexo g 生成静态网页,然后输入 hexo s 可以本地预览效果,最后输入 hexo d 上传到 github 上。这时打开你的 github.io 主页 就能看到发布的文章啦。
到这儿基本第一部分就完成了,已经完整搭建起一个比较简陋的个人博客了,接下来我们就可以对我们的博客进行个性化定制了。

第二部分 定制

我们要定制自己的博客的话,首先就要来了解一下 Hexo 博客的一些目录和文件的作用,以及如何平滑更换漂亮的主题模板并加入自己的定制源代码实现个性化定制


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 1598554108@qq.com

文章标题:Hexo+Github 博客搭建教程

文章字数:2.9k

本文作者:记忆存储

发布时间:2020-03-11, 19:52:42

最后更新:2020-03-17, 15:46:44

原始链接:https://nknnn.top/archives/Hexo+Github%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E6%95%99%E7%A8%8B.html

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

目录
×

喜欢就点赞,疼爱就打赏