Hexo+Gitee pages搭建个人博客
“ 没有搭建过个人博客然后放弃的程序员不是好送外卖的”
01
—
前言
本文仅仅针对有程序开发基础或有决心毅力的人,如果想点点按钮就搭建成功,那还是算了。
搭建个人博客有很多方法,可以自己购买服务器、购买域名、自己动手开发(或利用开源项目,比如Halo等)、部署搭建个人博客,但对于个人来说,成本还是相对较高。
Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态页面托管在GitHub、Gitee等平台上,是搭建博客的首选框架。
可能选用Github的更主流一些,但是在这里我选用的是码云(Gitee),主要原因是访问速度相对较快,github容易被墙,访问速度较慢。
02
—
准备工作
准备工作
帐号申请
一个Gitee码云帐号
简书帐号(编辑文章用,个人习惯)
本地开发环境
* Node.js
* Git
* Markdown编辑器
* windows电脑(以windows系统为例)
03
—
开始搭建
Gitee
[码云平台地址](https://gitee.com)
进入平台并注册一个帐号,并创建一个仓库
如果想最终发布的博客链接地址是http://xxxx.gitee.io这种格式的,建议注册码云帐号的用户名和仓库名都为xxxx。
比如我的码云用户名是daijiyong,创建了一个项目名为daijiyong,最终我的博客链接地址就是http://daijiyong.gitee.io
开发环境搭建
[NodeJs官网](http://nodejs.cn/)
[Git下载地址](https://git-scm.com/downloads)
均选择默认安装就行
安装Hexo
安装完NodeJs和Git,便可以开始安装Hexo了
创建博客目录
选择一个文件路径,创建一个文件夹,比如blog
进入blog文件夹,并右击鼠标右键,选择Git bash here
安装Hexo
在git bash界面依次执行如下命令进行Hexo的安装
npm install -g hexo-clihexo init
hexo会将这个文件夹初始化成一个博客专用文件夹,生成过程稍微要点时间,耐心等待。
初始化完成后,会有一个默认主题以及一个hello-word的默认文章。所以我们可以先生成博客来看一下效果,运行命令:
hexo generate //可以简写成 hexo g
然后hexo会开始生成博客,生成结束后,会多出一个public的文件夹,这个文件夹就是hexo生成的一个完整的静态网站,也就是我们的博客。网站生成好了,我们要浏览它,所以要开启一下服务器,运行命令:
hexo server //可以简写成 hexo s
然后打开浏览器,输入localhost:4000就可以浏览我们的博客了。
下载主题
在blog目录下右击鼠标,点击git bash here,并执行如下命令,速度可能有点慢,会在themes目录下生成一个新的文件夹Butterfly,即为新主题
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
修改站点配置文件_config.yml(也就是blog目录下的_config.yml文件),把主题改为Butterfly
theme: Butterfly
之后执行如下命令,并在浏览器输入http ://localhost:4000,即可查看新主题样式
hexo s
如果有报错,为缺少依赖包,可根据[Butterfly主题配置文档](https://jerryc.me/posts/21cfbf15/#%E5%AE%89%E8%A3%9D)进行安装修补
修改配置
[Butterfly主题配置文档](https://jerryc.me/posts/21cfbf15/#%E5%AE%89%E8%A3%9D)
配置文档非常详细,可以根据配置文档一步一步完善和改进个人博客
发布部署
在站点编辑文件(blog根目录中的_config.yml文件)中新增或修改如下参数,其参数为你自己创建的码云仓库的参数
deploy:type: gitrepo: git仓库项目地址branch: 分支message: 自定义提交说明,这个字段可以没有
配置完之后执行如下命令,即可将编译的博客文件提交到码云的仓库
hexo clean && hexo deploy
如下图,依次点击服务-Gitee Pages,进入Pages服务页面
如下图,通过点击发布之后的链接,即可访问个人博客
04
—
博客维护
新增博客
在blog文件夹下右击鼠标,点击git bash here,执行如下命令
hexo new "文章名称"
会在source/_post目录下生成一个新的.md文件,即可编辑文章
我更喜欢通过简书编辑.md,因为图片可以直接拖拽,生成链接地址,编辑完成之后,直接将内容复制出来即可
删除博客
直接删除source/_post目录下对应的.md文件,重新启动程序就可以了
修改博客
修改对应的.md文件,重新发布程序即可
文/戴先生@2020年3月18日
---end---
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【colab pytorch】模型权重初始化
- 【colab pytorch】提取模型中的某一层
- django-URL实例命名空间(十一)
- 【colab pytorch】数据预处理
- django-URL默认参数传递
- springmvc之自定义视图
- 【colab pytorch】训练和测试常用模板代码
- django-VIews之HttpResponse(一)
- django-Views之request(二)
- django-Views之常见的几种错误视图代码(三)
- django-Views之装饰器(四)
- django-Views之使用视图渲染模板(五)
- springmvc实例之显示雇员相关信息(一)
- django-Views之类视图 (六)
- springmvc之重定向