ZYM'Blog

To learn, to be strong

0%

在Mac上用Hexo快速搭建Github个人博客

发表于 更新于 分类于 Valine：
本文字数： 2.6k 阅读时长 ≈ 2 分钟

本文主要是介绍在Mac上利用Hexo以及Github pages快速搭建一个个人博客。整体流程非常简单，按步骤来就可以。

搭建前提：拥有一个Github账号 + 有耐心。。。

知识简介

  • Hexo

Hexo 是一个快速、简洁且高效的静态博客框架，它基于 Node.js 运行，可以将我们撰写的 Markdown 文档解析渲染成静态的 HTML 网页。

  • GitHub pages

GitHub Pages 是由 GitHub 官方提供的一种免费的静态站点托管服务，让我们可以在 GitHub 仓库里托管和发布自己的静态网站页面。

环境准备：

因为Hexo是基于Node.js的，环境搭建过程中还需要使用npm和git，因此需要先安装Node.js和Git。

下载并安装，按默认配置完成安装ok。

安装完成后，打开终端terminal，输入下列命令，并对应输出结果说明安装成功。

test1

连接Github

拿出你的Github账号。比如就叫账号就是： 邮箱

接下来创建SSH密匙。输入下列命令：

1
ssh-keygen -t rsa -C "GitHub 邮箱"

然后一路回车。OK

  • 添加密匙：

进入 /Users/用户名/.ssh 目录，找到id_rsa.pub文件并复制里面的内容，登陆Github，进入到settings界面，选择左边栏的SSH and GPG keys,点击 New SSH key。 title名字可以随意取，复制的id_rsa.pub内容现在粘贴在key中，点击Add SSH key添加完成。

  • 验证连接：

在终端输入 ssh -T git@github.com ， 问你‘are you sure’， 然后 输入 yes回车

ssh

上图表示已经连接成功了！OK

创建Github Pages仓库

GitHub 主页右上角加号 -> New repository：

  • Repository name 中输入 用户名.github.io (注意这里必须和你用户名保持一致)
  • Description选填

  • 设定为Public

  • 勾选 “Initialize this repository with a README”

填好后点击 Create repository 创建。创建后默认自动启用 HTTPS，博客地址为：https://用户名.github.io

本地安装 Hexo 博客程序

接下来开始使用npm 安装Hexo 博客程序：

1
sudo npm install -g hexo-cli

注意需要获取管理员权限，由此需要输入开机密码。

installhexo

出现上图所示那就说明安装成功了。

新建一个文件夹用来存放 Hexo 的程序文件，如 Blog。

终端切换到Blog的路径：cd /Users/m/Documents/Blog这是我存放Blog的路径。

接下来依次输入：

1
2
hexo init      # 初始化
npm install    # 安装组件

完成后依次输入下面命令，启动本地服务器进行预览：

1
2
hexo g   # 生成页面
hexo s   # 启动预览

访问 http://localhost:4000，出现 Hexo 默认页面，本地博客安装成功！OK

Tips：如果出现页面加载不出来，可能是端口被占用了。Ctrl+C 关闭服务器，运行 hexo server -p 5000 更改端口号后重试。

输入命令 ls 查看你的blod文件目录：

ls

其中config是网站的配置信息，package是应用程序的信息，scaffolds是模板文件夹，source是存放用户资源的（Markdown文档）themes是主题文件夹，public是网站文件。

部署 Hexo 到 GitHub Pages

本地博客测试成功后，就是上传到 GitHub 进行部署，使其能够在网络上访问。

首先安装 hexo-deployer-git：

1
npm install hexo-deployer-git --save

然后修改 _config.yml 文件末尾的 Deployment 部分，修改成如下：

1
2
3
4
deploy:
  type: git
  repository: git@github.com:用户名/用户名.github.io.git
  branch: master

完成后运行 hexo d 将网站上传部署到 GitHub Pages。

完成！这时访问我们的 GitHub 域名 https://用户名.github.io 就可以看到 Hexo 网站了。

发布博文

进入Blog所在目录，创建博文：

1
hexo new "name"

然后 source 文件夹中会出现一个 name.md 文件，就可以使用 Markdown 编辑器在该文件中撰写文章了。

写完后运行下面代码将文章渲染并部署到 GitHub Pages 上完成发布。以后每次发布文章都是这两条命令。

1
2
hexo g   # 生成页面
hexo d   # 部署发布

也可以一句话直接生成并部署如下句

1
hexo g -d             # 生成页面并部署

其他命令

1
2
3
4
hexo s                # 本地预览
hexo s --debug        # 本地预览调试
hexo clean            # 清除缓存和已生成的静态文件
hexo help             # 帮助

主题优化

我们博客的主题文件夹都放在根目录下的themes中，我们可以看到默认的主题是landscape。我猜大多数人是不喜欢的，那么可以选择其他的主题在hexo的主题网站上，不过建议新手的我们乖乖用最热门的主题NexT吧，而且这个主题相当简洁优雅有档(Bi)次(Ge)。

直接在终端 cd 到博客根目录，然后输入下列命令：

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

note：我在本地下载的时候很慢，于是我用了阿里云服务器进行的下载，下载之后用Filezilla又下载到了本地，然后将next主题放到themes文件夹下，如果网速好，可以科学上网的请忽略本条注释。

完成下载后在站点目录中搜索关键字 theme。修改其内容如下

image-20200306224250629

保存，发布并预览 hexo g -d. !

快去看看是不是现在变好看了好多？

主题优化

剩下的进行更细节的网站设计，大家去查询吧！

推荐一个我主要参考的主题优化的网站。

结语

最后的最后要有一个conclusion 和 future work。

博客是我辛辛苦苦搭建了近两天，特别感谢我的大树哥铺好的路，让我少走不少弯路，我在自己的菜单页推荐了我可爱的大树哥，大家可以向他好好学习（不知道为什么越写越像致谢）。

不过还好多出问题没有解决，但是整个博客做好以后真的是开心的不得了呀！以后要努力写博客！加油！o^_^o

博客有问题或者我哪里写的不对请大家可以用旁边的信息私聊我呀～

-------------本文结束感谢您的阅读-------------