在GitHub上利用Hexo搭建静态博客（Mac OS系统下）

最新推荐文章于 2024-10-06 22:27:53 发布

HaleYan

最新推荐文章于 2024-10-06 22:27:53 发布

阅读量253

点赞数

分类专栏：在github上搭建博客文章标签： github hexo 博客 Mac OS 静态博客

本文链接：https://blog.csdn.net/weixin_42052612/article/details/83716347

版权

在github上搭建博客专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Mac OS 上进行github的配置

注册GitHub账号，直接去官网注册即可
创建github.youname.io
在自己的主页，点击”New repository”，即可新建一个版本库
安装或更新git
通常在Mac OS系统中都装有git，但是git版本未必是最新的，检查电脑上是否安装了git,通过在命令行输入 git –verion命令来检查，如果出现版本号，则说明安装了git。如下图。

如果你发现你的系统上没有安装git，那么你要到git的官网下载并安装最新版本的git，如下图所示。

在这里插入图片描述
即便电脑上安装了git，仍然建议更新到最新版本，如上图git下载页面的下面，即在终端输入

git clone https://github.com/git/git
来进行更新。

创建ssh key
设置username和email（github每次commit都会记录他们）
终端输入：

通过终端命令创建ssh key

以下是回车后的的输出：

由于这里我原来已经创建过，所以这里我选n。没有创建过的，会要求确认路径和输入密码，我们这使用默认的一路回车就行。成功的话会在~/下生成.ssh文件夹，进去，打开id_rsa.pub，复制里面的key。
终端查看.ssh/id_rsa.pub文件，用cat命令查看。或直接去该文件夹下查看。
复制里面的key然后登入到github,添加ssh key。
链接验证
终端输入

ssh –T git@github.com
回车后出现hi则说明已经链接成功。

hexo的安装与配置

安装Node
去Node.js官网下载相应的安装包，一路安装即可。
查看node和npm是否成功
安装Hexo
终端下执行命令

$ sudo npm install -g hexo

创建一个文件夹，是要吧Hexo安装在这个文件夹里

终端cd到该文件夹下，输入
$ hexo init
执行如下命令开启hexo服务器:
$ hexo s

此时，浏览器中打开网址[http://localhost:4000]，能看到如下页面：
在这里插入图片描述
本地设置好后，接下来开始关联Github。
在创建的文件夹下面有这些文件

我这里是用sublime text打开_config.yml文件

deploy:
type: git
repository: https://github.com/用户名/用户名.github.io.git
branch: master

在编辑所有的 _config.yml文件时（包括主题theme里的_config.yml文件）在所有的冒号:后边都要加一个空格，否则执行hexo命令会报错。填写完后，保存。

在hexo文件夹目录下执行生成静态页面命令：
$ hexo g

此时若出现如下报错：
ERROR Local hexo not found in ~/blog
ERROR Try runing: ‘npm install hexo --save’
则执行命令：
npm install hexo --save
若无报错，自行忽略此步骤。

再执行配置命令：
$ hexo d

若你未关联Github，则执行hexo deploy命令时终端会提示你输入Github的用户名和密码，即

Username for ‘https://github.com’:
Password for ‘https://github.com’:

hexo deploy命令执行成功后，浏览器中打开网址[http://haleyan.github.io]（将haleyan换成你的用户名）能看到和打开[http://localhost:4000]时一样的页面。

3 发布文章
终端cd到hexo文件夹，执行如下命令：

npm install https://github.com/CodeFalling/hexo-asset-image --save

这样是可以在新创一个.md文件的同时生成同名的文件夹
然后输入以下命令：

$ hexo new “test”
名为test.md的文件会建在目录/hexo/source/_posts下,同时出现test文件夹。

在这里插入图片描述

在test文件夹下添加图片
在这里插入图片描述

用sublime text打开test.md文件，进行编辑，图一是选择绝对路径，图二是选择相对路径。
在这里插入图片描述

---
title: test
date: 2018-10-31 19:49:13
tags:
---
测试添加两张图片，图片1用绝对路径，图片2用相对路径

图一
<br>
![BP](http://dpic.tiankong.com/32/0w/QJ9115157352.jpg)
<br>
<br>
图二
<br>
![BP](test/2.png)
<br>

特别注意，如果是在windows系统下，这个图片的文件名，要添加上**.格式名**

在命令行 cd到hexo的文件夹目录下。
输入命令

$ hexo clean           //清除缓存文件 (db.json) 和已生成的静态文件 (public)
$ hexo g				//生成缓存和静态文件
$ hexo d				//重新部署到服务器 (可以先执行hexo s 命令，打开本地hexo服务器，在本地预览修改后再执行hexo d部署到服务器)

之后我是更改了主题，头像等等。形成了最终的原型。
可以打开我的网址 https://haleyan.github.io .