抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

这是我将 hexo 部署在 GitHub、Vercel(还可以用Gitee和Netlify)搭建静态网站的一些经验🌚

本来用的是 GitHub+Coding,但是 Coding 因为经常抽风用不起新版就弃了

可能有一些疏漏请大佬指正🌚🌞

超长文警告🤨❗❗❗

下面这张图是总体的部署思路

Quick Start

准备阶段

安装 Node.js

下载地址:传送门 去 NodeJs 官网下载相应版本,进行安装。 可以通过node -v的命令来测试 NodeJS 是否安装成功(同时按win+R输入cmd按回车在打开的界面输入下面的代码)

1
node -v

安装 Git

下载地址:传送门 去 Git 官网下载相应版本,进行安装。(无脑 next 即可)可以在 cmd 输入的命令来测试 git 是否安装成功

1
git --version

配置 SSH key

在 C:\Users\【你的用户名】目录下右键单击选择 Git Bash Here,在命令行中输入

1
ssh-keygen -t rsa -C "【你注册GitHub的邮箱】"

成功后会在 .ssh 文件夹生成 id_rsa 以及 id_rsa.pub,打开 id_rsa.pub(如果没有文本编辑器可以使用记事本打开),将文件里的所有字符复制。

添加 SSH Key

GitHub

登陆 GitHub 在任意界面右上角,点击你的头像,选择 Settings-> SSH keys->New SSH key,Title相当于一个备注可以随便输,然后在 Key 中把刚刚复制的 SSH Key 粘贴进去,点击 Add SSH Key 即可

Coding(腾讯码市)

登陆 Coding 在任意界面右上角,点击你的头像,选择个人设置->SSH公钥->新增公钥,在公钥内容中粘贴刚刚复制的内容点击添加即可

Gitee(阿里码云)

登陆 Gitee 在任意界面右上角,点击你的头像,选择设置->安全设置->SSH公钥,在公钥内容中粘贴刚刚复制的内容点击确定即可

安装 Hexo

安装

在用户目录(C:\Users\【你的用户名】)新建一个 Blog 文件夹,文件右键,选择 Git Bash Here,在命令行输入下面的代码

1
npm install -g hexo

等安装完毕,通过输入 hexo 的命令来测试 Hexo 是否安装成功,成功如下图展示:

初始化 Hexo
1
hexo init hexo

初始化成功后,会显示 Start blogging with Hexo!

这时在你刚才创建的 Blog 里面会多出一个 hexo 文件夹

安装依赖文件以及部署形成文件

先输入

1
cd hexo

安装依赖文件,输入

1
npm install

部署形成文件,输入

1
hexo generate

本地测试 Hexo

输入

1
hexo server

或者

1
hexo s

此时提示 Hexo is running at http://loalhost:4000/.

接着我们打开浏览器,输入http://localhost:4000/便可看到默认的博客

此时 Hexo 已经安装完了


创建代码仓库

GitHub

配置 githubPage

登录 Github,点击 New repository 来新建一个版本库

输入仓库名:你的 Github 名称.github.io,然后点击 Create repository

注意:创建的仓库名字必须用的 github 的用户名,因为 GithubPage 你的用户名作为仓库名才能激活

启用 GitHub Page

点击右边的 Setting 菜单进入设置,点击 Launch automatic page generator

进入之后点击底部的Continue to layouts

试着打开自己在 github 的静态网址比如我的https://zryyyy.github.io,你会发现打开是你自己刚才选择静态站点模版

将本地 hexo 项目托管到 Github

打开 hexo 根目录下的配置文件 _config.yml

编辑最后面的 deploy 属性,加入代码:

1
2
3
4
deploy:
type: git
repository: git@github.com:zryyyy/zryyyy.github.io.git
branch: master

注:

type 使用是 git
repository 属性改成你的刚才创建仓库 git 地址
分支 branch 填写 master

Coding

配置 Coding Page

登陆 Coding,点击所有项目然后点击新建项目

点击 DevOps 项目

项目名称项目标识都填自己的用户名

勾选启用README.md 文件初始化项目

点击完成创建后进入创建的仓库

点击持续部署->静态网站->新建静态网站->保存

注:如果没有实名认证应该需要先实名认证一下

将本地 hexo 项目托管到 Coding

打开 hexo 根目录下的配置文件 _config.yml

编辑最后面的 deploy 属性,加入代码:

1
2
3
4
deploy:
type: git
repository: git@e.coding.net:zryyyy/zryyyy.git
branch: master

注:

type 使用是 git
repository 属性改成你的刚才创建仓库 git 地址
分支 branch 填写 master

Gitee

配置 Gitee Page

登陆 Gitee,点击上方的+->新建仓库

输入项目名称

归属路径使用账号

最后点击创建

将本地 hexo 项目托管到 Gitee

打开 hexo 根目录下的配置文件 _config.yml

编辑最后面的 deploy 属性,加入代码:

1
2
3
4
deploy:
type: git
repository: htttps://gitee.com/zryyyy/zryyyy.git
branch: master

注:

type 使用是 git
repository 属性改成你的刚才创建仓库 git 地址
分支 branch 填写 master

部署到代码仓库

安装 hexo-deployer-git 插件

在 hexo 根目录右键后点击Git Bash Here,输入命令

1
npm install hexo-deployer-git --save 

安装自动部署发布工具

输入命令

1
2
3
hexo clean
hexo g
hexo d

hexo clean 作用是清除编译的部署文件每次在对博客选项(如主题)修改后都要执行这个操作不然会导致进行的修改不生效

hexo g 作用是编译部署文件

hexo s 作用是本地预览,如果确定博客内容没有问题可以跳过,但是一般建议还是先在本地预览一下

hexo d 作用是将生成的部署文件使用 SSH 或者 https 推送到代码仓库

hexo 支持使用&&连接两个命令所以也可以直接输入

1
hexo clean && hexo g && hexo d 

发布博客,首次发布可能需要在 shell 中输入账号和密码

注意事项

  1. _config.yml 文件中的冒号后面一定要有空格,否则不能正确识别,建议不要用记事本打开因为可能会出现一些不知道的错误,我使用的是 lighttable (现在是 VS Code)
  2. 如果要同时部署到多个代码仓库,需要在每个 type 前面的两个空格中的第一个空格改成-如下面的代码所示
1
2
3
4
5
6
7
deploy:
- type: git
repository: git@github.com:zryyyy/zryyyy.github.io.git
branch: master
- type: git
repository: git@e.coding.net:zryyyy/zryyyy.git
branch: master
  1. _config.yml 中基本的配置选项,根据自己需要修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#因为hexo的版本不同,可能有些参数会发生变化

# Site
title: Zry's blog #网站的标题
subtitle: '' #副标题
description: '' #描述
author: Zry #作者信息
language: zh-CN #语言(zh-CN为中文简体)

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: stun #要应用的主题名

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git #部署环境一般写的都是 git
repository: git@github.com:zryyyy/zryyyy.github.io.git
#git 的仓库地址,替换成用户名即可
branch: master #分支名称,默认为 master
- type: git
repository: git@e.coding.net:zryyyy/zryyyy.git
branch: master
  1. 每在对博客文件修改后必须执行hexo cleanhexo g以后才能执行hexo d进行部署

  2. 部署完后在浏览器输入自己的博客地址就可以看到刚刚部署的博客了,下面是我的博客地址

    腾讯云域名国内外分流(推荐)

    Vercel

    GitHub

  3. 更多的配置帮助在 hexo 官方文档 有更详细的描述


使用hexo写作

生成新文章

hexo 根目录下右键后点击 Git Bash Here,输入

1
hexo new [layout] <title>

layout 为文章的布局,默认为 post,可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局

title 为文章标题,可自己命名

在输入时不用加上 []<>

执行完后会在 hexo\source\_posts 目录生成以刚刚输入的题目为文件名的 .md 文件

Markdown写作

hexo 原生支持 Markdown,所以文件为 .md,可以用支持 Markdown 的编辑器进行写作,下面是比较好用的 Markdown 编辑器

  • Typora 是我平时写作使用的编辑器😏,完全免费,支持 Windows、OS X 和 Linux,支持即时渲染技术,这也是与其他 Markdown 编辑器最显著的区别,支持数学编辑,可与 Word 直接格式转换,在 Pandoc 的支持下进行多种文档格式转换,Typora 适合那些对码字手速和排版顺畅度有要求的人群,而且对小白友好不懂 Markdown 的也可以轻松上手
  • Visual Studio Code 这是众所周知的神器,是微软推出一款轻量级的文本编辑工具,类似于 Sublime,默认集成 Markdown 文档编辑插件,原生支持高亮 Markdown 的语法,但想要实时预览还需要选择 Markdown: Open Preview to the Side 命令实现,相关教程请点击此处
  • Marxico 中文名马克飞象,提供桌面客户端以及离线 Chrome App,支持移动端 Web,可以直接把文本存到印象笔记,缺点是不免费,点击此处访问 Marxico 国际版
  • Sublime Text 是基于 Vim 开发的跨平台代码编辑器收费 80 美元,可以免费试用,支持 OS X、Windows、Ubuntu 等 UNIX 及 Linux 操作系统,由于其功能的多样性而广受好评,界面简约大方,定位专业,原生支持的编程语言就多达十几种,通过第三方插件,还能实现更多语法的支持,其中就包括 Markdown ,但缺点不能实时预览,不过用户可以通过 Markdown Preview 的插件实现对 Markdown 的预览,具体教程请点击此处查看

差不多就先写这么多吧,下次可能随缘更新😗😘


2020.8.15 更新:

先用 cd 命令进入要更新的主题目录,然后执行以下语句

1
2
3
4
git add .
git stash
git pull
git stash pop

执行完后就更新完主题了

原理:

1.git stash 可以将工作区恢复到上次提交的内容,同时备份本地所做的修改才可以正常进行 git pull

2.git pull 完成后,执行 git stash pop 会将之前本地做的修改应用到当前工作区

附:相关Git命令知识

git add .
他会监控工作区的状态树,使用它会把工作时的所有变化提交到暂存区,包括文件内容修改(modified)以及新文件(new),但不包括被删除的文件

git stash
能够将所有未提交的修改(工作区和暂存区)保存至堆栈中,用于后续恢复当前工作目录

git stash save
作用等同于 git stash ,区别是可以加一些注释

git stash list
查看当前 stash 中的内容

git stash pop
将当前 stash 中的内容弹出,并应用到当前分支对应的工作目录上
注:该命令将堆栈中最近保存的内容删除(栈是先进后出)
如果从 stash 中恢复的内容和当前目录中的内容发生了冲突,也就是说,恢复的内容和当前目录修改了同一行的数据,那么会提示报错,需要解决冲突,可以通过创建新的分支来解决冲突

git stash apply
将堆栈中的内容应用到当前目录,不同于 git stash pop,该命令不会将内容从堆栈中删除,也就说该命令能够将堆栈的内容多次应用到工作目录中,适应于多个分支的情况
堆栈中的内容并没有删除。
可以使用 git stash apply + stash名字(如stash@{1})指定恢复哪个 stash 到当前的工作目录

git stash clear
清除堆栈中的所有内容

git stash show
查看堆栈中最新保存的 stash 和当前目录的差异

评论