MAC安装Hexo到Github Pages

今天突发奇想,想在Github Pages上部署一个Hexo博客,于是记录一下,这篇文章是基于 Mac 的,所以接下来所有准备工作都是指在 Mac 系统环境下的。

环境安装

  1. Node.js
  2. Git (安装过X-Code就不用安装了)
  3. hexo

安装教程

一、安装Git安装Git请参考教程:https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85-Git

二、安装Node.js安装Node.js请访问官网下载并安装:https://nodejs.org/zh-cn/

上面两个环境在官网下载安装即可。

三、安装hexo-cli

打开OS系统终端

  • 取得mac root权限

由于安装hexo-cli会写入mac系统文件,所以需要root权限安装。 首先,打开mac终端,输入命令:

sudo -i

根据提示输入mac密码回车即可(输入密码不会显示在终端上,只管输入完后回车即可)

接下来在取得root权限的终端中输入命令

npm install -g hexo-cli

千万不要忘记加上 -g 这个选项,这是用于全局安装的

当出现如下所示界面即表示安装成功:

初始化hexo

新开一个终端窗口,以普通用户身份运行(为什么要新开窗口以普通用户身份运行?因为如果以root身份初始化hexo会将“hexo”目录下的所有文件权限设置为只有System用户才有读写权限,极不方便后续的修改操作)执行如下命令初始化hexo

首先,你需要创建一个新的路径,并且进入这个路径(以blog为例):

$ mkdir blog
$ cd blog/

在这个新的路径就可以开始 Hexo 的初始化:

$ hexo init

如果出现任何关于 “dependence” 的提示,这是在提示你安装依赖包,那么执行:

npm install

如果,没有,则不执行。

当出现如下所示界面时即表示初始化完成:

运行 Hexo

$ hexo server
或
$ hexo s

运行这条命令可以启动 Hexo 的本地服务器功能,不要关闭终端,启动浏览器,在地址框内输入:localhost:4000 来访问你的本地 Hexo 博客 你会看到里面目前只有一篇 Hello World 文章,这是 Hexo 初始化的,里面包含了基础的操作

提示如下运行成功:
MacBook-Pro:blog ankylau$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

浏览完你的初始化博客后,回到命令行,按下 Ctrl+C 停止运行。

至此,你已经在本地运行起来了hexo!

配置

可能刚刚你有注意到,网站的标题有问题,作者也不是自己 这时候我们就需要配置:用自己习惯的编辑器打开 Hexo 文件根目录下的 _config.yml 按照以下格式编辑

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 站点配置
title: Hexo-demo #网站标题
subtitle: hexo is simple and easy to study #网站副标题
description: this is hexo-demo #网栈描述
author: pomy #你的名字
language: zh-CN #网站使用的语言
timezone: Asia/Shanghai #网站时区
# URL #可以不用配置
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com #网址,搜索时会在搜索引擎中显示
root: / #网站根目录
permalink: :year/:month/:day/:title/ #永久链接格式
permalink_defaults: #永久链接中各部分的默认值
# Directory 目录配置
source_dir: source #资源文件夹,这个文件夹用来存放内容
public_dir: public #公共文件夹,这个文件夹用于存放生成的站点文件
tag_dir: tags #标签文件夹
archive_dir: archives #归档文件夹
category_dir: categories #分类文件夹
code_dir: downloads/code #Include code 文件夹
i18n_dir: :lang #国际化文件夹
skip_render: #跳过指定文件的渲染,您可使用 glob 来配置路径
# Writing 写作配置
new_post_name: :title.md # 新文章的文件名称
default_layout: post #默认布局
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0 #把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false #显示草稿
post_asset_folder: false #是否启动资源文件夹
relative_link: false #把链接改为与根目录的相对位址
future: true
highlight: #代码块的设置
enable: true
line_number: true
auto_detect: true
tab_replace:
# Category & Tag 分类 & 标签
default_category: uncategorized #默认分类
category_map: #分类别名
tag_map: #标签别名
# Date / Time format 时间和日期
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination 分页
## Set per_page to 0 to disable pagination
per_page: 10 #每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page #分页目录
# Extensions 扩展
## Plugins: http://hexo.io/plugins/ 插件
## Themes: http://hexo.io/themes/ 主题
theme: landscape #当前主题名称
# Deployment #部署到github
## Docs: http://hexo.io/docs/deployment.html
deploy:
type:

创建一篇新的文章

刚刚配置完了,也就把信息矫正过来了,接下来就要写一篇自己的博文(以“你好”为例): (注意:本地服务器要使新的配置生效,需要重启 hexo s 服务)

$ hexo new 你好

这样就创建了一篇叫做 你好 的文章,在 ./source/_posts 当中

编辑新文章

打开新文章 你好.md,会发现里面已经存在5行代码,那都是初始化数据,而我们要写的内容,在第5行代码 “—” 之后。

Hexo 的文章全部采用 Markdown 语法编辑,简单便捷

生成文章

编辑完 你好.md 之后,我们就需要生成这篇博文:

$ hexo generate

这样,我们的文章就在 public 目录下生成 html 了

预览文章

写完整个文章,当然要看一下成果,我们再执行一遍运行指令:

$ hexo server

打开 localhost:4000,就可以看到新文章了

部署到Github Pages

创建完GitHub仓库后

安装hexo-deployer-git

命令如下:

npm install hexo-deployer-git --save

安装完成后,将如下配置添加到你的_config.yml文件中:

deploy:
 type: git
 repo: <repo>

其中<repo>为刚创建的Github Pages仓库的地址,格式为:https://github.com/你的Github用户名/仓库名.git

配置完成后,运行命令hexo ghexo generate生成静态文件(如果觉得文件有缓存,还可以先运行hexo clean命令,再运行hexo g):

hexo g

再运行hexo dhexo deploy命令发布hexo到Github pages:

exo d

回车后会提示你输入Github账户名及密码,输入后回车即可。

至此,你已成功部署到Github Pages,访问你的Github用户名.github.io即可访问你的hexo网站。

我的HEXO博客站 https://ankylau.github.io/

绑定域名

  1. 域名解析CNAME到你的Github用户名.github.io
  2. 进入public文件夹里,新建一个CNAME文件
  3. 把域名写在CNAME里
  4. 为了防止域名解析出问题博主建议将blog下的public下的CNAME文件,复制到blog下的source文件夹里,这样更新public,不会出现CNAME文件丢失的情况
  5. 再次运行命令hexo g与hexo d发布到Github Pages,待域名解析生效后即可用你的域名访问你的hexo网站。

 

 

常用hexo命令

https://hexo.io/zh-cn/docs/commands.html

本文中所有参考文档

http://hujun.site/2017/08/20/hexo-install/

https://billts.site/2018/01/24/hexomac/

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注