Hexo + Git Pages搭建个人博客(一)
Hexo + Git Pages搭建个人博客(一)
期待已久的Hexo
部署教程终于来了,本次发帖是在经过较长时间地使用Hexo
之后才发出的,一成功就发感觉有点不稳,本贴主要是记录了本博客站的最终搭建方案,会分为几个部分,这次就讲讲怎么把Hexo
运行起来的方法。
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
安装和配置Hexo
安装
安装前准备
由于Hexo
依赖Node.js
,所以必不可少的使用了npm
来进行安装插件,所以需要提前安装好Node.js
和npm
,但是由于npm
使用的是境外服务器,所以推荐安装一下淘宝的国内镜像cnpm
,还有安装主题文件时可能会使用到git
工具,所以也需要安装,具体所有安装如下:
- 安装Node.js和npm
sudo pacman -S nodejs npm
使用npm -v
和node -v
能看到以下输出即可
- 安装cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org
- 安装git
sudo pacman -S git
顺利安装完成即可
安装Hexo至本地blog文件夹并配置
安装好环境依赖以后就可以开始着手准备Hexo
的安装了,基本上安装除了主题使用git
和部署Hexo
使用hexo
命令外其他都是用cnpm
工具,当然,如果你能魔法上网的话用npm
也可以
安装Hexo
需要使用超级用户权限才可以安装到全局环境下,这样可以在本地文件系统的任一位置部署Hexo
,比较方便
sudo cnpm install -g hexo
顺利安装完成后在控制台终端里面输入hexo -v
有如下输出即可
配置
部署Hexo博客根目录
- 进入到要创建博客的文件目录
- 以下的YourHexoBlogName都改为你自己需要的文件夹名称
开始部署:
hexo init YourHexoBlogName
在经历一段时间的部署后就会在当前目录下多出一个名为YourHexoBlogName
的文件夹,里面的目录结构大概如下
.
├── _config.yml #Hexo的配置文件
├── node_modules #插件及环境目录
├── package.json #安装的所有包的json归档文件
├── scaffolds #配置和资源未使用到,不讲
├── source #存放资源文件夹
├── themes #存放主题的文件夹
└── yarn.lock #配置未用到,不讲
如果未与上述相符的话要么是本贴太老旧,要么就是你没有安装对咯
安装主题
Hexo
官方收录了大量的精美博客主题,只需要前往主题收录地址进行下载,然后解压至theme目录下即可,一般主题都会有一个README
文件,里面一般都会讲解说明主题的文件夹名称和主题名称,对好入座后在Hexo
的配置文件_config.yml
的theme:
后面填写对应主题即可。
配置Git Page服务
一般来说一般人是没有个人域名的,更不用说个人服务器了,本贴是基于不需要依托付费的在线方案进行部署Hexo
的,所以推荐使用GitHub
或者Gitee
进行在线部署,这两个在线的托管平台都提供了Git Pages
服务,但是这两者之间是有一定差异的,下面讲解:
-
GitHub
:提供免费的公开仓库Pages
服务,上传自动部署更新,使用似有的仓库进行Pages
需要付费;属于境外服务器,国内访问速度不稳定,不推荐使用上传仓库中的图片,建议使用图床。 -
Gitee
:提供免费公共似有仓库的Pages
服务,但是上传不能自动部署更新,需要手动更新 ,自动更新需要付费;属于国内服务器,国内访问速度很快,可以使用上传仓库中图片。
根据上述优缺点可以自行进行选择Pages
服务的提供商,我个人是使用gitee
搭建图床+github
搭建博客网站的方法,gitee
由于在国内访问图片较快,可以搭建私有仓库并开启Pages
服务,每次添加图片可以去更新一下,github
可以自动部署更新,无脑上传很方便,外国友人也可访问,大厂风范,使用舒服。
本贴只介绍gitee
作为博客网站托管平台
创建仓库
这里需要提前注册gitee
帐号,并且实名,不然不能使用Git Pages
服务,点击此处前往注册。
- 创建仓库时建议创建与自己帐号名一致的仓库名,这样在
gitee
可以获取到一个专有二级域名的网址,如我的用户名impressionyang创建一个同名的仓库之后开启Pages
服务得到了一个https://impressionyang.gitee.io
的二级域名,而不用使用子文件夹,比较好看。
点击右上角的+
号内的创建仓库进行创建仓库
进行信息填写之后按照自己的想法选择私有
或者公开
之后创建仓库,不要自行添加任何文件哦,比如README
什么的。
仓库创建完成后点击仓库资源右边的克隆/下载
里面的复制按钮复制仓库地址,留作后用
配置Hexo的deploy配置
如果需要配置Git Pages
的话需要配置一下Hexo
的_config.yml
里面的deploy
项,但在此之前,必须要先安装deploy
插件,插件安装命令如下:
cnpm install hexo-deployer-git --save
接着进行配置,大概配置如下
deploy:
type: git
repo: 你的仓库地址
branch: master
注意:冒号后面一定要有空格
配置好之后就可以进行上传部署了,在Hexo
博客根目录下面运行
hexo clean && hexo g && hexo d
然后hexo
就会进行资源文件的清理、生成、部署到git
上,部署时根据你的git
的验证方式进行即可
- 1707: [Usaco2007 Nov]tanning分配防晒霜
- JavaScript 图片的上传前预览(兼容所有浏览器)
- 算法模板——sap网络最大流 3(递归+邻接表)
- BZOJ4819: [Sdoi2017]新生舞会(01分数规划)
- 3401: [Usaco2009 Mar]Look Up 仰望
- javascript 基本概念
- vue内置指令详解——小白速会
- javascript 函数详解
- 深海中的STL—nth_element
- javascript Object与Array用法
- vue class与style 绑定详解——小白速会
- java8-Stream之数值流
- POJ 3694 Network(Tarjan求割边+LCA)
- java之Cookie详解
- 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 数组属性和方法
- 搭建Blynk开源物联网服务端(2)---开始使用
- NPM安装模块报错:Error: sha1-W+8rAcUcgURBLVhzyvg+IvHsa4Q= integrity checksum failed when using sha1: wanted
- OPA Gatekeeper 策略入门
- 给Linux命令行加个问候语
- RaspberryPi接入HomeKit
- React Fetch请求
- React使用代理解决跨域问题
- React登录跳转遇到的问题
- 响应式架构与 RxJava 在有赞零售的实践
- Centos 7搭建Gitlab服务器超详细Centos 7搭建Gitlab服务器超详细(搭建成功)
- Netty之旅二:口口相传的高性能Netty到底是什么?
- 前端知识复习(一)
- Powershell运行脚本报错:此系统上禁止运行脚本
- git rebase解决合并冲突
- npm相关操作