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

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

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

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

超长文警告🤨❗❗❗

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

This is a picture without description

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
  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 clean和hexo g以后才能执行hexo d进行部署

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

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

    Coding

    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和当前目录的差异

评论