- 本次环境搭建过程涉及工具安装,搭建仓库并生成SSH Key,初始化本地博客和部署博客到远程GitHub四个过程。
#工具简述
Node.Js
Node.js 是一个开源和跨平台的 JavaScript 运行 时环境,用来支持 JavaScript 代码的执行。几乎是任何类型项目的流行工具。
npm
- npm(全称Node Package Manager),是Node.js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的,能解决Node.js代码部署上的很多问题,相当于前端的Maven 。
- npm(全称Node Package Manager),是Node.js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的,能解决Node.js代码部署上的很多问题,相当于前端的Maven 。
Hexo和Node.js关系
- Hexo是基于Node.js开发。
- Hexo是基于Node.js开发。
Git
Git是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。(如:版本迭代)
版本控制(补充)
是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统。
版本控制的作用
- 将某个文件回溯到之前的状态,甚至将整个项目都回退到过去某个时间点的状态,可以比较文件的变化细节等。
- 将某个文件回溯到之前的状态,甚至将整个项目都回退到过去某个时间点的状态,可以比较文件的变化细节等。
版本控制的分类
本地版本控制系统
- 采用某种简单的数据库来记录文件的历次更新差异。
- 采用某种简单的数据库来记录文件的历次更新差异。
集中式版本控制系统(协同工作,如SVN)
- 使用单一的集中管理的服务器,保存所有文件的修订版本,而协同工作的人都通过客户端连到这台服务器,取出最新的文件或者提交更新。(缺点:容易单点故障、受网络影响大)
- 使用单一的集中管理的服务器,保存所有文件的修订版本,而协同工作的人都通过客户端连到这台服务器,取出最新的文件或者提交更新。(缺点:容易单点故障、受网络影响大)
分布式版本控制系统(Git)
- 客户端并不只提取最新版本的文件快照,而是把代码仓库完整地镜像下来。
- 协同工作时,每个客户端都是完整的版本库。(缺点:每个客户端拥有全部的代码,有安全隐患。)
Hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章。
Hexo 和 Typecho 的区别(扩展)
- “静态和动态”:主要是指其对数据处理的方式
- Typecho:通过数据库来动态的查询、调用、展示的叫“动态”,
- Hexo:直接生成纯.html网页文件来供浏览的叫“静态”
- Hexo
- 基于Node.js,不过多的依赖于常见的 LNMP 生产环境,只需要一个域名和一个免费托管平台。
- Typecho
- 比Hexo成熟,但是域名、服务器,后台等都需要自己管理。
- “静态和动态”:主要是指其对数据处理的方式
#1. 工具安装
- 以管理员模式打开命令提示符
- 检查Node.Js安装:
node -v
- 查看Node.Js安装路径:
where node
- 检查npm安装:
npm -v
npm
包管理工具- 更改npm全局包安装路径
- npm有两种安装方式
- 安装在当前项目路径中:
npm install
- 修改全局包的安装路径
- 全局包的安装路径:
npm config set prefix "E:/nodejs/npm_global"
- 全局包的缓存路径:
npm config set cache "E:/nodejs/npm_cache"
- 全局包的安装路径:
- 修改全局包的安装路径
- 安装在当前项目路径中:
- 全局安装:
npm install -g
(推荐)- 全局路径一般默认在:C:\Users\计算机名\AppData\Roaming\npm
- 查看是否配置成功:
npm config ls -l
- npm有两种安装方式
- 更换淘宝镜像源:
npm config set registry http://registry.npmmirror.com/
- 检查是否更换成功:
npm config get registry
- 添加环境变量
- 新建变量名NODE_PATH, 值为上述添加的npm_global路径下(如: E:\nodejs\npm_global\node_modules)
- 将E:\nodejs\npm_global添加到path变量中。
- 更改npm全局包安装路径
- 检查npm安装:
- 补充:解决Git bash找不到Hexo环境解决方法,
- 检查 Node.js 和 npm 是否已安装:
node -v
和npm -v
- Hexo 的路径在环境变量中:
- 控制面板” → “系统和安全” → “系统” → “高级系统设置”。点击“环境变量”。通常是:
<blog_folder>/node_modules/.bin
- 控制面板” → “系统和安全” → “系统” → “高级系统设置”。点击“环境变量”。通常是:
- 检查 Node.js 和 npm 是否已安装:
- 检查Git安装:
git --version
- 配置全局用户名和邮箱:
git config --global user.name “github’s Name”
git config --global user.email “[email protected]”
git config --list
//然后查看自己的配置
- 检查Git安装:
安装Hexo
npm install hexo-cli -g
- 检查安装:
hexo -v
#2. 搭建仓库并生成SSH Key
- username.github.io仓库就是GitHub为个人账户分配站点仓库。
- username.github.io仓库就是GitHub为个人账户分配站点仓库。
将博客部署在项目站点
- 新建一个公开的username.github.io仓库(站点主页:导航)
- 新建一个私人的pages仓库(博客的写作站点:备份)
生成SSH Key
ssh-keygen -t rsa -C "[email protected]"
- 复制公钥(路径
C:\Users\UserName\.ssh\id_rsa.pub
)到添加到GitHub账户 - 测试SSH连接(成功会看到自己的github用户名)
ssh -T [email protected]
扩展(可选)
For 同时也使用 Git 管理站点目录
- 如果同时使用Git管理站点目录,应当注意部署分支应当不同于写作分支。(Hexo每次部署会完全覆盖该分支下的内容)
- 一个好的实践是:将站点目录和 pages 分别存放在两个不同的 Git 仓库中,也就是使用Github Actions[1] 自动化构建 main 分支仓库,然后手动提交并推送你的源码到 pages 分支,这样就可以有效避免相互覆盖的问题。
关于域名到期谷歌浏览器自动重定向旧域名:
- 浏览器输入
chrome://history/
,删除全部数据。
- 浏览器输入
可以放弃使用SSH,转而使用令牌
- 新建令牌注意保存密码,密码只会显示一次。
- 远程部署时再输入用户名和密码。
使用SSH私钥密码(可以保护 SSH 密钥并配置身份验证代理)
ssh-keygen -p -f ~/.ssh/id_rsa
在 Git for Windows 上自动启动 ssh-agent[2]
- 参考自使用 SSH 密钥密码
- 需要注意的是
.profile
文件在Git安装目录的/etc/下。
关于使用代理无法连接github客户端22端口
- 参考自:在 HTTPS 端口使用 SSH
C:\Users\Your_user_name\.ssh
创建Config文件, 内容如下:
1
2
3
4
5
6Host github.com
User [email protected]
Hostname ssh.github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_rsa
Port 443
#3. 初始化本地博客内容
新建本地博客文件夹(如:blog)
初始化Hexo到本地文件夹:
hexo init
这个命令做了两步:
Git clone hexo-starter 和 hexo-theme-landscape 主题到当前目录或指定目录。
使用 Yarn 1、pnpm 或 npm 包管理器下载依赖(如有已安装多个,则列在前面的优先)。npm 默认随 Node.js 安装。
安装Next主题
- 通过git指令下载NexT最新的主题文件:
git clone https://github.com/iissnan/hexo-theme-next themes/next
- 修改本地博客下文件夹下的_config.yml文件
1
2
3
4
5
6# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
theme_config:- 通过git指令下载NexT最新的主题文件:
生成本地服务器下的hexo 静态文件:
hexo server
访问本地博客:http://localhost:4000
- 更改本地服务器端口号:·
hexo server -p 5000
或者 _config.yml中添加下面代码:
1
2server:
port: 5000- 更改本地服务器端口号:·
#4. 部署博客到GitHub
基于SSH或者token连接GitHub
修改本地博客下文件夹下的_config.yml文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15# 1. 设置站点URL及根目录
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://username.github.io
root: /Folder/
# 2. 设置部署源(注意仓库地址的选择)
# 基于SSH就使用SSH克隆地址 / 基于token就使用HTTP克隆地址
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repository: [email protected]:username 或 username.github.io.git
branch: main
- 安装一键部署工具hexo-deployer-git:
npm install hexo-deployer-git --save
- 生成完毕后自动部署到网站:
hexo clean && hexo deploy
- 访问博客:
https://username.github.io