图片稍多,网速不好的小伙伴耐心等待加载喔。

在Gitee搭建属于自己的博客(保姆级)

想要搭建一个个人博客但是我没有服务器,没有域名,又不想找免费的服务器怕不稳定咋办?没事有gitee和github呀,这两大开源的代码网站提供了稳定的平台,这不香吗,这里就推荐使用gitee,因为github在国内属于那种半墙状态了,所以访问非常慢;而gitee却在国内

一、搭建前的准备

需要用到的工具:

1、git(版本控制工具)

2、node.js(JavaScript 运行环境)

3、Typora(md文档编辑器)

为了方便大家,我已经打包好了,自行下载安装即可;也可以自行到各个官网上下载并安装。

链接:https://pan.baidu.com/s/1_JcsNWdtUXtWnQ8VvjKMow
提取码:s5yc

WeChat 截圖_20220205185751

md文档编辑器不一定使用Typora,可以使用其他的,而且Typora也开始收费了,而我提供给大家的是不需要收费的,md文档编辑器的话是需要学习markdown的语法的,这语法,在我往期的文章里也有。

二、工具的安装

1、安装git

运行git的安装包—选择next

WeChat 截圖_20220205205756

选择安装路径这里一般默认即可,也可以更改安装路径

WeChat 截圖_20220205205920

然后下面的全是默认即可:

WeChat 截圖_20220205205939WeChat 截圖_20220205205955WeChat 截圖_20220205210050

……一直默认选择next到这个界面之后—选择install 就自动安装了

WeChat 截圖_20220205210210

到这里就是安装完成了

WeChat 截圖_20220205211231

安装完之后,在任意地方既可以看见:

WeChat 截圖_20220205211202

这时候选择 Git Bash Here

一个类似与DOS的界面,也类似于Linux的终端:

WeChat 截圖_20220205211416

到这里git安装完

2、安装Typora

运行Typora—选择—第一个就可以

WeChat 截圖_20220205211643

这里的路径同样默认即可,你也可以更改路径;然后点击Next.

WeChat 截圖_20220205211741

默认即可—点击Next.

WeChat 截圖_20220205211752

点击install进行安装

WeChat 截圖_20220205211803

到这就安装完成了

WeChat 截圖_20220205212037

点击finsh

出现这个界面就安装成功了

WeChat 截圖_20220205212112

到这里Typora就安装完成了

3、安装node.js

按照上面的方法进行安装node.js即可,一路默认安装即可,可根据个人喜好修改默认的安装路径。(怎么爽怎么来)

WeChat 截圖_20220205212350WeChat 截圖_20220205212402WeChat 截圖_20220205212549

到这里就安装完成了,来验证一下是否安装成功,在任意处打开 git 或者 cmd ,检查安装是否成功

1
2
3
4
#检查 node.js
node -v
#检查 npm
npm -v

输入以上两条命令,看见版本号,说明安装完成了

WeChat 截圖_20220205212826

4、安装cnpm

这时候,win+R 输入 cmd,进入 cmd 面板,输入以下命令,等待安装完成:

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

WeChat 截圖_20220205213925

出现这个提示之后

检查 cnpm 是否安装成功

1
cnpm -v

![WeChat 截圖_20220205214038](D:\相片\blog\WeChat 截圖_20220205214038.png)

到这里说明已经安装成功了

三、博客的安装/配置

1、博客安装

使用 cnpm 安装 hexo 博客

这里是以管理员的方式打开 cmd ,输入以下内容,然后等待安装就可以了

win + q 打开搜索,输入 cmd 就可以看见

WeChat 截圖_20220205214208

安装命令:

1
cnpm install -g hexo-cli

WeChat 截圖_20220205214417

命令行跑完之后,输入以下的命令,验证是否安装成功

1
hexo -v

WeChat 截圖_20220205214545

看到这串信息的话就说明安装完成了

2、博客初始化

上面博客的框架已经安装好了,我们要进行初始化

根据个人喜好,在任意盘符新建文件夹并任意命名,我这里命名为 lanmo_blog (怎么爽怎么来,这个文件夹是不能删除的)

20220205215006

然后进入这个文件夹,右键打开 GitBash,输入以下命令,初始化博客,等待下载完成

1
hexo init

WeChat 截圖_20220205215307

已经安装完成

3、运行博客

这时候我们来运行一下看看是否安装完成

在博客文件夹的根目录右键打开 GitBash 输入下面的命令运行

WeChat 截圖_20220205215611

看见 localhost:4000/这个说明已经成功运行了

此时是在本地上运行的所以我们在浏览器输入 http://localhost:4000/ 也就是它给出的网址查看一下

WeChat 截圖_20220205215850

看见这个界面就说明博客运行没有问题了

4、hexo常用命令

以下命令均是在 hexo 博客所在文件夹的根目录打开 GitBash输入

1、本地启动博客,启动完成后可在浏览器预览:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
本地启动博客,启动完成后可在浏览器预览:
hexo s
#ctrl+c 停止

清除博客缓存:
#一般在切换博客主题,或者博客效果与预期不一致时执行该命令
hexo clean

将 md 文件生成静态页面:
#一般在使用 hexo clean 命令后使用
hexo g

推送到码云
hexo d

2、新建博客:

1
hexo new "标题"

WeChat 截圖_20220205220751

新建完文章之后,查看文章的地址,然后用刚刚安装的Typora打开,编写

WeChat 截圖_20220205221113

输入内容后保存,再次运行博客,在浏览器刷新查看

WeChat 截圖_20220205221252

四、部署博客

之前都是在本地运行的,但是想要别人看见那就要gitee

1、打开码云

官网:(https://gitee.com/)

登录码云

PS:没有账号的先注册账号

2、新建仓库

在右上角的加号上点击—-新建仓库

WeChat 截圖_20220205221754

WeChat 截圖_20220205222216

按照上面的填写就行,仓库地址要记住,等下需要用到

3、安装 git 插件

这里先安装 git 插件;在博客根目录下右键 GitBash 打开,输入以下内容,等待下载完成

1
cnpm install --save hexo-deployer-git

WeChat 截圖_20220205222604

这里就安装完成了

4、设置远程仓库

打开博客主目录里面的 _config.yml

WeChat 截圖_20220205222729

1、设置 URL

按照下面说明进行设置

WeChat 截圖_20220205223134

2、设置仓库地址

1
2
3
4
deploy:
type: git
repo: https://gitee.com/chenyi1109/test1 注:这是仓库地址
branch: master

这个代码块在文件最后

按照下面说明进行填

![WeChat 截圖_20220205223510](D:\相片\blog\WeChat 截圖_20220205223510.png)

5、部署到 gitee

上面设置好之后就可以开始部署了

在博客根目录下右键 GitBash 打开,输入以下内容:

1
2
3
4
5
6
7
8
先进行清除缓存:
hexo clean

然后将 md 文件生成静态页面:
hexo g

最后上传上去
hexo d

WeChat 截圖_20220205223953

hexo -d之后出现了报错

WeChat 截圖_20220205224104

因为这是第一次上传上去,所以需要设置账号和邮箱,使用下面命令

1
2
3
4
5
#设置你登陆码云的邮箱账号
git config --global user.email "@.com" 自己设置

#设置你登陆码云的名字
git config --global user.name "自己填"

WeChat 截圖_20220205224614

输入完之后,再次输入

1
hexo d

此时会弹出弹窗,输入你码云的账号和密码即可

WeChat 截圖_20220205224624

看见INFO Deploy done: git表示推送成功

WeChat 截圖_20220205224722

这个弹窗只会弹出第一次,第二次就不会了,他是在电脑的凭证了记录了

那就有人问了,我输错密码咋办?解决方法如下:

win + q —打开搜索框—搜索控制面板—-右上角选择小图标—-找到凭据管理器—windows凭据—找到普通凭据—-找到gitee相关的那一栏—点击右边的小箭头—-展开后点击删除即可,然后重新部署就可以重新输入密码了

WeChat 截圖_20220205225254

6、开启静态页面服务

进入码云新建的仓库,开启 Gitee Pages

WeChat 截圖_20220205225543

正常新注册的用户的话是先需要实名认证的,认证通过后就可以开启了

下面可以选择强制使用HTTPS

然后点击启动即可

WeChat 截圖_20220205225623

WeChat 截圖_20220205225918

hexo 博客部署就到这里了,更多高级玩法让你自己来发觉了

五、hexo 中常用的命令

1、博客流程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1、写博客
执行 hexo new “名字”,hexo 创建该 md 文件,使用 typora 编辑并保存

2、清缓存&更新渲染
执行 hexo clean 清除缓存,

随后执行 hexo g 重新渲染静态页面

3、推送到码云
执行 hexo d

4、更新码云的静态页面

5、重新访问网站

2、命令集合

命令 解析
hexo new “名字” 创建一篇新文章或者新的页面
hexo clean 清除缓存
hexo generate 生成静态文件
hexo deploy 部署网站(部署之前预先生成静态文件)
hexo init [folder] 新建一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站
hexo publish [layout] 发表草稿
hexo server 启动服务器。默认情况下,访问网址为: http://localhost:4000/
hexo render [file2] … 渲染文件
hexo migrate 从其他博客系统 迁移内容
hexo list 列出网站资料
hexo version 显示 Hexo 版本
hexo –safe 安全模式
hexo –debug 调试模式
hexo –silent 简洁模式(隐藏终端信息)
hexo –draft 显示草稿(显示 source/_drafts 文件夹中的草稿文章)
hexo –cwd /path/to/cwd 自定义 CWD

自定义配置文件的路径

1
2
3
4
5
# 使用 custom.yml 代替默认的 _config.yml
$ hexo server --config custom.yml

# 使用 custom.yml 和 custom2.json,其中 custom2.json 优先级更高
$ hexo generate --config custom.yml,custom2.json,custom3.yml

自定义配置文件的路径,指定这个参数后将不再使用默认的 _config.yml
你可以使用一个 YAML 或 JSON 文件的路径,也可以使用逗号分隔(无空格)的多个 YAML 或 JSON 文件的路径。例如:

1
2
3
4
5
# 使用 custom.yml 代替默认的 _config.yml
$ hexo server --config custom.yml

# 使用 custom.yml, custom2.json 和 custom3.yml,其中 custom3.yml 优先级最高,其次是 custom2.json
$ hexo generate --config custom.yml,custom2.json,custom3.yml