手把手教你使用Hexo和github搭建免费个人博客网站

4次阅读

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

俗话说的好“吃水不忘挖井人”,当自己体验过 Hexo 搭建个人网站后,也来分享一下搭建过程遇到的乐趣以及遇到的坑!

准备工作(电脑配置工具)

在搭建 Hexo 博客之前,首先需要简单在你电脑安装一些工具以及依赖包(具体安装方法相信大家都会,就省略了)

首先要有一个 github 账号
其次安装 node.js,npm 依赖
然后安装 git 工具(当然电脑自身的 cmd 工具也是可以用的)

创建 github 网站(username.github.io 的 github 仓库)

新建一个名为“你的用户名.github.io”的仓库,比如说,如果你的 github 用户名是 mengnn,那么你就新建 ”mengnn.github.io” 的仓库(必须是你的用户名,其它名称无效),将来你的网站访问地址就是 mengnn.github.io 了,对的,就是这么方便。

<!–more–>

当然,一个 github 账户下只能创建一个以此命名的仓库,用来直接访问。

点击 New repository
输入 Repository name,必需为 username.github.io 格式。username 替换为用户名
点击按钮 Create repository
进入仓库 username.github.io, 点击 setting, 找到 GitHub Pages 模块
点击 choose a theme 选择一个页面主题
访问 https://username.github.io 就可以访问博客网站了

为 github 设置 SSH Keys

之所以配置 SSH Keys,是因为你提交代码肯定要拥有你的 github 权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用 ssh key 来解决本地和服务器的连接问题。

首先检查机器上是否已经存在 id_rsa.pub 文件

cd ~/. ssh #检查本机已存在的 ssh 密钥

如果不存在那就通过命令生成秘钥

ssh-keygen -t rsa -C "邮箱地址"

一路回车就好(记得应该是连续 3 次回车),最终会生成一个文件在用户目录下,打开用户目录,找到 .ssh\id_rsa.pub 文件,记事本打开并复制里面的内容。

打开你的 github 页面,点击 setting 进入 —> SSH and GPG keys —> New SSH key, 然后把你复制的内容放到 Key 中,其中 Title 中的内容可以随便填一个就 ok 了,如下图:

添加成功保存就 OK 了。

测试 SSH Key

输入下面命令,测试 SSH Key 是否安装成功

ssh -T git@github.com # 不用改邮箱地址

如果提示Are you sure you want to continue connecting (yes/no)?,输入 yes,然后会类似于:`Hi mengnn! You’ve successfully authenticated, but GitHub does not provide shell
access.` 的字符,说明你安装成功了。

安装 Hexo

以上准备工作完成后,就要放大招了,对,接下来就是重头戏 - 本地部署 Hexo。

具体的 Hexo 介绍,你可以在网上查询,有很多,当然你也可以去 Hexo 官网详细了解,这里就不做过多介绍,不过要特别强调的是,上面的命令行以及下面的 npm 操作都是通过 Git Bash Here 操作的,所以前面写到要提前安装 git 工具。

安装前特别准备

特别注意的是:国内 npm 安装依赖实在是太慢太慢太慢了,尤其一些依赖小则一百兆左右,大则几百甚至上 G 兆,所以强烈推荐使用淘宝镜像 cnpm 安装依赖,淘宝镜像安装方法如下:

npm install -g cnpm --registry=https://registry.npm.taobao.org
// 查看 cnpm 是否安装成功
cnpm -v
// 如果出现版本号的信息,说明你安装成功

然后所有的 npm 操作你都可以换成 cnpm 操作了,当然下面为了大家不混淆,还是用的 npm 操作,你操作的时候全都可以替换成 cnpm。

安装进行

通过以下命令行全局安装 Hexo

$ npm install -g hexo

初始化仓库

在你机器的合适位置创建项目文件夹(这个文件夹就是以后你写博客的存档文件夹,所有的内容都会在这个里面),比如我创建的是 Blog,然后使用 git 找到 Blog 根目录下

cd Blog

在项目根目录下初始化你的 Hexo。

在初始化之前,尤其抢到一点,你进行的 hexo init 操作会比较慢,耐心等待,特别特别抢到的事,你的 node 版本尽量要高于 v.6.3.0,不然很大可能你的初始化操作进行一天也不会完成,所以,初始化之前尽可能的检查一下 node 版本,升级 一下

cd /f/Blog
hexo init

初始化完成后,在你根目录下面会生成一些文件

然后你就可以进行 hexo 操作生成文章以及本地运行

hexo g # 生成对应的 html
hexo s # 启动服务

上面命令执行完成后,你就可以在根目录的 public 文件夹下看到对应的生成页面(这个文件夹的内容也会是你推送到 github 上的内容)

hexo s 是开启本地预览服务,打开浏览器访问 http://localhost:4000 即可看到内容。

上传到 github

以上内容都配置好了,你就可以上传到 github 上了(首先,ssh key肯定要配置好,其次,配置 _config.yml 中有关 deploy 的部分)

在之前,我们已经配置好 ssh 了,所以接下来我们要配置初始化后生成的_config.yml 文件,配置如下:

deploy:
  type: git
  repository: git@github.com:mengnn/mengnn.github.io.git
  branch: master

然后你就可以上传了

hexo d #上传本地代码到 github

上传成功后你就可以访问你的 github 域名进行访问了,比如例子中的[mengnn.github.io]()

更改主题

第一次初始化的时候 hexo 已经帮我们写了一篇名为 Hello World 的文章,默认的主题比较丑。不信你可以自己打开看看。不要急,我们可以更改自己喜欢的主题。当然你可以先在官网中查看自己喜欢的主题,然后下载下来就 OK 了。我选择的是一个 yilia 主题

下载这个主题(当然,下载主题可以有很多方法,最后只要你能下载的主题文件 copy 到根目录下的 theme 文件夹中即可):

cd F:\Blog\themes  #进入到根目录下的 themes 文件夹(这个就是主题文件夹)git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia  #下载 yilia 主题到文件夹中

下载完成后,你会看到下面的内容(第一个文件就是你刚刚下载的 yilia 主题文件,第二个是系统默认主题文件)

修改根目录下的_config.yml中的 theme: landscape 改为 theme: hexo-theme-yilia,然后重新执行hexo g 来重新生成,然后 hexo d 提交就 OK 啦。

如果出现一些莫名其妙的问题,可以先执行 hexo clean 来清理一下 public 的内容,然后再来重新生成和发布。

对的,这样你的新主题就更改成功,然后这个主题下还有很多详细高端配置,就暂时不在这里详说了,放一个我自己配置好的界面:

写博客

所有的都配置好,怎么去写博客呢?

定位到我们的项目文件 F:Blogsource_posts 中,你所有的初始博客都是保存在这里的,包括你所有的 md 文件

cd F:\Blog\source\_posts

定位之后你就可以在定位的文件夹里生成 md 文件了

hexo new 'my-first-blog'

当然,你也可以自己手动在_posts 文件夹中创建.md 文件,进行编写


---
title: postName #文章页面上的显示名称,一般是中文
date: 2019-08-14 22:30:16 #文章生成时间,一般不改,当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1, tag2, tag3] #文章标签,可空,多标签请用格式,注意逗号后面有个空格
description: 附加一段文章摘要,字数最好在 140 字以内,会出现在 meta 的 description 里面
---

另外在这里我推荐一个个人认为比较好用的写博客工具:Typora,目前为止我发现的最好用的 md 文件编辑器,可以上传图片,代码块,文字编辑,主题更好等等,轻量级而且好用,Typora 官网,你可以下载你需要的版本。

以上就是简单的 Hexo+github 博客的部署以及上传,相信对于入门的你来说已经足够了,后续会推出进阶版的文章,请持续关注。

正文完
 0