实验:macOS+GitHub+Hexo+NexT=搭建个人博客
一、本地环境准备
(一)命令行安装HomeBrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
打开 Terminal.app ,以普通用户身份粘贴上面这行代码;此过程需要保持网络畅通
这个过程中需要输入一次用户口令
(二)下载安装git
1、下载DMG镜像
https://git-scm.com/downloads
建议下载最新版本
2、通过dmg镜像安装git
双击 git-2.16.3-intel-universal-mavericks.dmg,然后双击打开窗口中的第一个pkg软件包
按照向导,选择标准安装
(三)下载安装node.js
1、下载pkg软件包
https://nodejs.org/en/
建议下载最新版本
2、通过pkg软件包安装node.js
双击 node-v10.1.0.pkg
按照向导,选择标准安装
(四)命令行安装Hexo
npm install hexo-cli -g
https://hexo.io/zh-cn/docs/
官方技术支持文档
二、创建本地站点
(一)注册一个GitHub账号
我的用户名:linyongfeng2018
访问链接:https://github.com/linyongfeng2018
(二)初始化站点目录
cd /Volumes/Docs/
hexo init linyongfeng2018.github.io
cd /Volumes/Docs/linyongfeng2018.github.io/
npm install
❕警告:
站点目录名必须遵守规范格式
username.github.io
原因是“这种命名方式涉及到GitHub Pages的命名规则”
(三)测试本地站点是否可以访问
1、启动本地hexo server服务
hexo server
2、浏览器访问测试
http://localhost:4000/
将上面的链接复制粘贴到浏览器地址栏并回车
如果页面能够正常显示,说明上面的步骤没有问题,创建站点成功!
三、上传本地站点前的准备工作
(一)创建仓库(repository)
1、添加一个新的仓库
点击页面右上角的 加号 ,在下拉菜单中选择 New repository
2、仓库命名
仓库名前缀一定要和用户名一样!!!
linyongfeng2018.github.io
3、其他
其他地方不需要修改,直接 Create repository
(二)配置SSH key
1、创建密钥对
mkdir /Volumes/Docs/.ssh
ssh-keygen -t rsa -b 4096 -C 2578731631@qq.com
格式说明:
(1)ssh-keygen :用来生成、管理和转换认证密钥,包括 RSA 和 DSA 两种密钥
(2)-t rsa :指定密钥类型为 RSA
(3)-b 4096 :指定密钥长度为 4096
(4)-C [email protected] :添加描述,后面跟“我的GitHub设置的邮箱”
2、第一次询问“保存密钥的路径”
第一次提示符:“Enter file in which to save the key (/Users/linyongfeng/.ssh/id_rsa): ”
默认是放到家目录下:/Users/linyongfeng/.ssh/
回车即可~
3、第二、三次询问“加密口令”
第二次提示符:“Enter passphrase (empty for no passphrase):”
回车即可~
第三次提示符:“Enter same passphrase again: ”
回车即可~
(三)导入私钥到本机系统
1、检查ssh-agent是否活跃
eval "$(ssh-agent -s)"
2、添加私钥到系统中
ssh-add ~/.ssh/id_rsa
(四)上传公钥到GitHub设置
1、跳转到设置页面
点击页面右上角的 头像 ,在下拉菜单中选择 Settings
2、跳转到SSH key管理页面
在页面左侧找到 SSH and GPG keys 并点击跳转
3、SSH key上传入口
点击页面右上角的 New SSH key 按钮
4、查看自己创建的公钥文件的内容
cat ~/.ssh/id_rsa.pub |less
5、填写公钥
(1)Title:填写任意标题,比如 id_rsa.pub
(2)Key:粘贴 id_rsa.pub 文件的内容
(3)然后点击 Add SSH key 按钮
(五)设置仓库同步使用SSH
1、打开我的仓库列表页面
点击页面右上角的 头像 ,在下拉菜单中选择 Your profile 打开我的仓库列表页面
2、打开我的仓库页面
点击 linyongfeng2018.github.io 进入我的仓库页面
3、更改同步方式
在页面中间有 HTTPS/SSH 切换按钮,选择 SSH
4、拷贝同步地址
将 HTTPS/SSH 切换按钮右边的地址拷贝下来
[email protected]:linyongfeng2018/linyongfeng2018.github.io.git
(六)关联远程仓库
1、编辑本地站点根目录下的 站点配置文件 /_config.yml
cd /Volumes/Docs/linyongfeng2018.github.io/
open _config.yml
默认调用 Sublime Text 3 打开此文档
2、修改Deployment设置
修改 站点配置文件 内容的最后一个段落
# Deployment
## Docs: https://hexo.io/docs/deployment.html
## 填写用于“发布站点”的配置
deploy:
## 使用什么方式来发布站点
type: git
## 发布到哪个目的地
repo: git@github.com:linyongfeng2018/linyongfeng2018.github.io.git
## 使用哪一个代码分支
branch: master
四、推送本地站点到远程仓库
(一)第一步:清除旧的编译数据库
hexo clean
(二)第二步:重新编译站点
hexo generate
(三)第三步:安装缺失的工具(不安装则下一步会发布失败)
npm install --save hexo-deployer-git
(四)第四步:发布站点到 GitHub Pages
hexo deploy
输入:yes
(五)测试 GitHub Pages 是否可以访问
https://linyongfeng2018.github.io/
将上面的链接复制粘贴到浏览器地址栏并回车
如果页面能够正常显示,说明上面的步骤没有问题,推送站点成功!
恭喜!!!
五、添加NexT主题
(一)下载主题
cd /Volumes/Docs/linyongfeng2018.github.io/
git clone https://github.com/theme-next/hexo-theme-next themes/next
(二)启用主题
1、编辑本地站点根目录下的 站点配置文件 /_config.yml
cd /Volumes/Docs/linyongfeng2018.github.io/
open _config.yml
默认调用 Sublime Text 3 打开此文档
2、修改theme设置
修改 站点配置文件 内容的Extentions
段落
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
## 使用NexT主题;默认是landscap
theme: next
(三)验证主题
1、清除旧的编译数据库
hexo clean
2、重新编译站点
hexo generate
3、启动本地hexo server服务
hexo server
4、浏览器访问测试
http://localhost:4000/
将上面的链接复制粘贴到浏览器地址栏并回车
如果页面能够正常显示,说明上面的步骤没有问题,添加NexT主题成功!
六、定制NexT主题
(一)切换Scheme
1、编辑本地站点根目录下的 NexT主题配置文件 /themes/next/_config.yml
cd /Volumes/Docs/linyongfeng2018.github.io/
open themes/next/_config.yml
默认调用 Sublime Text 3 打开此文档
2、修改Scheme设置
修改 NexT主题配置文件 内容的Schemes
段落
# Schemes
# 将需用启用的 scheme 前面注释 # 去除即可;此处启用Pisces
#scheme: Muse
#scheme: Mist
#推荐使用Pisces,双栏Scheme,正常显示用户头像
scheme: Pisces
#scheme: Gemini
可以通过在Sublime Text中按
Command+f
输入关键词scheme
然后直接按4次Command+g
找到这个段落
说明
scheme名称 | style风格 | 简要介绍 |
---|---|---|
Muse | 默认Scheme | 黑白主调,大量留白 |
Mist | Muse的紧凑版本 | 整洁有序的单栏外观 |
Pisces | 双栏Scheme | 小家碧玉似的清新 |
3、测试修改是否生效
cd /Volumes/Docs/linyongfeng2018.github.io/
hexo clean;hexo generate;hexo server
http://localhost:4000/
将上面的链接复制粘贴到浏览器地址栏并回车
如果页面能够正常显示,说明上面的步骤没有问题,Scheme切换成功!
(二)设置站点语言
1、编辑本地站点根目录下的 站点配置文件 /_config.yml
cd /Volumes/Docs/linyongfeng2018.github.io/
open _config.yml
默认调用 Sublime Text 3 打开此文档
2、修改Site设置
修改 站点配置文件 内容的Site
段落
# Site
title: 攻城狮@疯子峰的博客
subtitle:
description:
keywords:
author: 攻城狮@疯子峰
language: zh-CN
timezone:
3、测试修改是否生效
cd /Volumes/Docs/linyongfeng2018.github.io/
hexo clean;hexo generate;hexo server
http://localhost:4000/
将上面的链接复制粘贴到浏览器地址栏并回车
如果页面能够正常显示,说明上面的步骤没有问题,站点语言设置成功!
(三)设置页面菜单
1、编辑本地站点根目录下的 NexT主题配置文件 /themes/next/_config.yml
cd /Volumes/Docs/linyongfeng2018.github.io/
open themes/next/_config.yml
默认调用 Sublime Text 3 打开此文档
2、修改menu设置
修改 NexT主题配置文件 内容的menu
段落
menu:
home: / || home
about: /about/ || user
categories: /categories/ || th
archives: /archives/ || archive
可以通过在Sublime Text中按
Command+f
输入关键词menu
然后直接按4次Command+g
找到这个段落
说明
键值 | 设定值 | 显示文本 | 对应图标 |
---|---|---|---|
home | home: / | 主页 | home |
about | about: /about/ | 关于 | user |
categories | categories: /categories/ | 分类 | th |
archives | archives: /archives/ | 归档 | archive |
3、打开NexT主题目录下的 语言翻译配置文件 /themes/next/languages/zh-CN.yml
cd /Volumes/Docs/linyongfeng2018.github.io/themes/next/languages/
open zh-CN.yml
4、设置菜单项的显示文本
修改 语言翻译配置文件 的menu
分支
menu:
home: 首页
about: 关于
categories: 分类
archives: 归档
search: 搜索
5、测试修改是否生效
cd /Volumes/Docs/linyongfeng2018.github.io/
hexo clean;hexo generate;hexo server
http://localhost:4000/
将上面的链接复制粘贴到浏览器地址栏并回车
如果页面能够正常显示,说明上面的步骤没有问题,页面菜单设置成功!
(四)设置页面侧栏
1、编辑本地站点根目录下的 NexT主题配置文件 /themes/next/_config.yml
cd /Volumes/Docs/linyongfeng2018.github.io/
open themes/next/_config.yml
默认调用 Sublime Text 3 打开此文档
2、修改menu设置
修改 NexT主题配置文件 内容的sidebar
段落
sidebar:
# Sidebar Position, available value: left | right (only for Pisces | Gemini).
#position: left
position: right
可以通过在Sublime Text中按
Command+f
输入关键词sidebar
然后直接按7次Command+g
找到这个段落
3、测试修改是否生效
cd /Volumes/Docs/linyongfeng2018.github.io/
hexo clean;hexo generate;hexo server
http://localhost:4000/
将上面的链接复制粘贴到浏览器地址栏并回车
如果页面能够正常显示,说明上面的步骤没有问题,页面侧栏设置成功!
(五)设置用户头像
1、编辑本地站点根目录下的 NexT主题配置文件 /themes/next/_config.yml
cd /Volumes/Docs/linyongfeng2018.github.io/
open themes/next/_config.yml
默认调用 Sublime Text 3 打开此文档
2、修改menu设置
修改 NexT主题配置文件 内容的avatar
段落
# Sidebar Avatar
avatar:
# in theme directory(source/images): /images/avatar.png
# in site directory(source/uploads): /uploads/avatar.png
# You can also use other linking images.
url: /images/avatar.png
# If true, the avatar would be dispalyed in circle.
rounded: true
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1
# If true, the avatar would be rotated with the cursor.
rotated: false
可以通过在Sublime Text中按
Command+f
输入关键词avatar
直接看到这一个段落
注意
头像的存放路径:
/Volumes/Docs/linyongfeng2018.github.io/themes/next/source/images/avatar.png
如需替换头像,请使用与 avatar.png
一模一样的文件名和后缀
cd /Volumes/Docs/linyongfeng2018.github.io/themes/next/source/images/
rm avatar.gif
cp ~/Desktop/avatar.png .
3、测试修改是否生效
cd /Volumes/Docs/linyongfeng2018.github.io/
hexo clean;hexo generate;hexo server
http://localhost:4000/
将上面的链接复制粘贴到浏览器地址栏并回车
如果页面能够正常显示,说明上面的步骤没有问题,用户头像设置成功!
-EOF-