通过 GitHub Pages 搭建 Hexo 的个人博客

本贴最后更新于 925 天前,其中的信息可能已经物是人非

前言

现在市面上有很多的博客网,如 CSDN、博客园、简书等平台。都可以直接在上面,发布、编辑,文章。用户交互也非常好,写的文章更能直接在百度上直接搜索到。缺点是比较不自由,会受到各种因素的限制和无关紧要的广告。

通过购买域名和服务器来搭建一个这样的网站,不光说购买成本。定期的维护,就要耗费用户太多的精力和时间。

除此之外还有一种选择,就是本篇所讲到的通过 GitHub Pages 搭建自己喜欢的 hexo 主题博客。将主题推送到 github pages 托管我们的博客,这样就可以放心写作了。Hexo 作为一个快捷简洁的博客框架,用它来搭建博客也是非常简单。

搭建完的效果 RawSong

Hexo 简介

Hexo 最初由 Tommy Chen351 于 2012 年创建和维护。从那时起,它已帮助成千上万的人建立了他们梦想中的网站/博客。

Hexo 是一个快速、简单、强大的博客框架。你用 Markdown(或其他标记语言)写帖子,Hexo 会在几秒钟内生成带有漂亮主题的静态文件。

  • 非比寻常的快
    使用 Node.js 给你带来难以置信的页面生成速度,每秒可构造数百个文件。
  • 支持 Markdown 语法
    支持所有为 Github 增添趣味而生的 Mrkdown 语法,你甚至可以在 Hexo 使用大部分的 Octopress 插件。
  • 一键部署
    只需使用一个指令即可将您的博客变更提交到 Github Pages、Heroku 或者其他个人网页。
  • 丰富的插件
    Hexo 拥有强大的插件系统,你可以安装更多的 Jade 插件或者 CoffeeScript 插件。

Hexo 搭建教程

本篇文章搭建教程主要有 6 个部分,看完便可搭建自己喜欢的个人博客,后续将出如何设置个人域名

  1. 安装 Git
  2. 安装 Node.js
  3. 安装 Hexo
  4. GitHub 创建个人仓库
  5. 将 hexo 部署到 GitHub
  6. 更改主题(fluid)

安装 Git

Windows:下载并安装 git。
Mac:使用 HomebrewMacPortsinstaller 安装。
Linux(Ubuntu,Debian):sudo apt-get install git-core
Linux(Fedora、Red Hat、CentOS):sudo yum install git-core

安装 Node.js

Hexo 是基于 nodeJS 编写的,所以需要安装一下 nodeJs 和里面的 npm 工具。
Node.js 为大多数平台提供官方安装程序
Windows:使用 nvs(推荐)或 nvm 安装它。
Mac:使用 HomebrewMacPorts 安装。
Linux(基于 DEB/RPM):使用 NodeSource 安装它。
其他:通过各自的包管理器安装。请参阅 Node.js 提供的指南
安装完后,打开命令行,输入以下两行检查安装是否成功

node -v
npm -v

安装 Hexo

安装完所有要求后,您可以使用 npm 安装 Hexo:

npm install -g hexo-cli

高级安装和使用(详情请查阅网上教程)
高级用户可能更喜欢安装和使用 hexo 包。

npm 安装 hexo

「至此环境准备完成,开始使用 hexo 搭个人博客」

hexo init 文件夹名
cd 文件夹名
npm install

此时你可以在你创建的文件里看到很多文件夹和文本文档,现在不重要,你慢慢会在实践中明白。
node_modules: 依赖包
public:存放生成的页面
scaffolds:生成文章的一些模板
source:用来存放你的文章
themes:主题
_config.yml: 博客的配置文件
接着输入以下指令进行本地启动查看,指令意思后面会讲

hexo clea
hexo g
hexo s

这三个命令非常重要,「hexo 部署到 github」github 会讲到。
接着,在浏览器中输入 localhost:4000 就可以看到生成的博客页面了。
ctrl + c 可以关掉服务。

GitHub 创建个人仓库

1.首先,你先要有一个 GitHub 账户,没有就去注册一个 GitHub
2.注册完登录后,在 GitHub.com 中看到一个 New repository,新建仓库。
3.创建一个和你用户名相同的仓库,后面加 .github.io,只有这样,将来要部署到 github page 的时候,才会被识别,也就是 xxxx.github.io,其中 xxx 就是你注册 GitHub 的用户名。我 github 用户名是 rawsong,所以我的叫 rawsong.github.io

生成 SSH 添加到 github 仓库。

由于后续都是通过 SSH 进行仓库代码的快速部署,所以这一步很有必要,如果之前有在你的电脑本地进行过你的 github 仓库的 SSH 绑定,那此步可跳过。
「回到你的 git bash 中,输入以下」

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

这里的 yourname 输入你的 GitHub 用户名,youremail 输入你 GitHub 的邮箱。这样 GitHub 才能知道你是不是对应它的账户。
可以用以下两条,检查一下你有没有输对。

git config user.name
git config user.email

然后创建 SSH,一路回车。

ssh-keygen -t rsa -C "youremail"

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

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

而后在 github 的 setting 中,找到 SSH keys 的设置选项,点击 New SSH key 把你的 id_rsa.pub 里面的信息复制进去。

之后,在 gitbash 中输入以下指令,查看是否 SSH 是否已绑定成功。

ssh -T git@github.com

将 hexo 部署到 github

这一步,我们就可以将 hexo 和 github 关联起来,也就是将 hexo 生成的文章部署到 github 上,打开站点配置文件 _config.yml,翻到最后,进行如下修改即可,RawSong 改为你的 github 账户用户名。

deploy:
  type: git
  repo: git@github.com:rawsong/rawsong.github.io.git
  branch: master

修改完配置文件 _config.yml 并保存后,回到 gitbash

这个时候需要先安装 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,但设置了 SSH 一般不用。
得到下图就说明部署成功了,过一会儿就可以在 http://yourname.github.io 这个网站看到你的博客了!!

##更改主题
这里我以 fluid 主题作为示例
来到主题的 github 仓库,下载最新的压缩包

下载完后,将压缩包解压到你博客项目的 themes 文件夹下,并将解压出来文件夹更名为 fluid

然后打开根目录的 _config.yml 文件,拉到最下面找到 theme 属性,修改为 fluid

同时,找到文件上方的 language 属性,修改为 zh-CN 即可。
然后,输入以下三个指令进行重新部署,过一会儿即可看到主题发生改变。

hexo clean
hexo g
hexo d

以上便是这篇文章的全部内容啦!!!

转载出自一别

  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 1 关注
1 操作
RawSong 在 2022-05-11 20:56:47 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • dianwu

    solo 也是差不多那个时候开始的