Github+hexo+next搭建教程
今天参考的是大神的教程,学了一个新东西,但是可能由于原教程中运用的npm包与我当前使用的npm包版本不同的原因,有出过多处运行错误,但都在此教程中解决了;
总结了下命令:
npm install hexo -g 全局安装
hexo -v 查看当前版本
hexo init 初始化
hexo install 安装组件
hexo g 生成加载页面
hexo s 开启服务 http://localhost:4000/
npm install --save hexo-deployer-git 部署git
hexo d 部署 hexo
前言
本次我会逐步演示如何在Github上搭建自己的静态博客,先看看我之前已经搭建好的博客效果:https://zouchanglin.github.io很多东西呢只是正对自己喜欢的风格来选择的,比如博客的风格,我自己比较喜欢Next主题的风格,Github上的项目地址是:https://github.com/iissnan/hexo-theme-next ,大家也可以根据自己喜欢的风格自行选择!
工具
markdown编辑器
由于我们写博客是需要使用markdown的语法的,一款好用的markdown文件编辑器必不可少,这个也是任凭大家自己选择,我个人比较喜欢使用Atom,这是一款跨平台的文本编辑器,用了一段时间感觉还不错。markdown语法很简单,在后面我会做一些简单的介绍。我也是最近才开始使用markdown来写博客,我以前是习惯在CSDN上写博客的,什么插入图片、插入代码、插入音乐、插入视频…之类的问题通通不用担心,这些坑我都踩过了,现在总结一下经验而已。Atom的下载地址:https://atom.io/ 安装过程很简单在此不赘述!
Git工具
这个不用说,提交代码必备,直接使用它的命令行工具就很OK,说到命令行大家也不用担心,常用的就那么几个,Git的下载地址:https://git-scm.com/download/win 安装过程很简单在此不赘述,安装完成后鼠标右键菜单就会多出两个选项:Git GUI Here 、Git Bash Here,其中Git Bash Here就可以在当前目录下打开Git的命令行!
Node.js
Node.js是一个Javascript运行环境,是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。hexo正是需要这个环境,所以安装安装Node.js是必不可少的,下载链接:http://nodejs.cn/download/ 安装过程也是非常简单,不在赘述!
注意:上面Git工具和Node.js环境是必须安装的,Atom只是一个方便于我们编辑md文件的工具,可以先不安装!
上述工具安装完成后,打开Windows的命令行,分别输入3个命令看看是否安装完成:
node -v 、npm -v 、git –version 出现版本号即说明安装完成!
Hexo
Hexo简介
hexo是个什么东西呢?总的来说就是把你的markdown文件转化为HTML静态页面的一种东西,浏览器是不会直接解析markdown文件的,所以我们需要把自己写的markdown文件先转化为HTML静态页面才能被浏览器解析,这个过程就需要Hexo来帮我们完成。更多内容请参考:http://coderunthings.com/2017/08/20/howhexoworks/ 这篇文章说的很详细!
安装过程
首先我们将本地的博客push到远程仓库中,本地博客得先有个存放位置,于是我们现在本地新建一个文件夹,名称随意(但是最好不要带中文和空格,对于一个程序员来讲,路径中包含中文或者空格简直是血的教训…),我就在A盘下新建一个名称为hexo的文件夹
然后进入到刚刚新建的文件夹,右键Git Bash Here,输入npm install hexo -g,开始安装Hexo,安装完成后输入 hexo -v 查看版本,出现如图所示信息即使安装成功
完成上一步操作之后,我们需要初始化这个文件夹,输入hexo init 即可初始化该文件夹,可以看到初始化之后中文件夹中多出来了如此多的内容!
接着我们需要安装一些组件,输入命令hexo install
忙活了这么一大堆,现在该生成HTML静态资源文件了,输入命令hexo g完成页面的生成
我们先在本地看看效果吧,输入hexo s开始服务器,地址是http://localhost:4000/ ,然后打开浏览器就会出现我们的页面:
出现上面的页面就意味着我们成功了一半!
Githu博客仓库的建立
首先我们得申请一个Github账号,已有Github账号的跳过
此时需要我们认证一下邮箱的内容,我就直接在Android端认证了,出现Your email was verified.即是认证成功,在PC端登陆自己的Github的账号就OK了
接下来建立正式建立我们的博客仓库,点击Strat a Project即可
注意仓库名称一定是你的Github用户名.github.io才是可以的
注意仓库名称一定是你的Github用户名.github.io才是可以的
注意仓库名称一定是你的Github用户名.github.io才是可以的
如果在创建仓库的时候没有勾选创建一个README文件的话,就创建完成之后在创建一个就好了,点击README,之后点击Commit new File就OK了!
此刻在浏览器输入https://你的Github用户名.github.io/,应该就会看到你的Github主页,如果显示404NotFound之类的请配置一下profile即可,或者有一定延迟或者浏览器缓存,请在网络一切正常的情况下进行相关操作!
关联Github远程和本地仓库
Git个人信息
还是在博客根目录打开Git Bash Here
- 设置Git的用户名和email:
1 |
git config --global user.name "你的Github用户名" |
- 生成ssh密钥
1 |
ssh-keygen -t rsa -C "你注册Github使用的邮箱" |
找到刚才生成的ssh密匙文件,复制其中的全部内容
按照图片所示操作
出现上图即配置完毕
配置Deploy
在博客根目录下找到_config.yml文件中,找到deploy,修改为
1 |
deploy: |
开始部署
当上述操作都完成之后,输入命令 hexo g 重新生成一下,然后使用命令hexo d 部署到Github远程仓库,这个时候一般会遇到一个问题:
这个时候我们需要执行一条命令
1 |
npm install --save hexo-deployer-git |
出现上图则说明安装成功,接着我们就可以直接使用命令hexo d部署了,首次使用ssh密匙的时候,需要我们输入一个yes确认一下
接着输入一下我们之前设定的仓库密码就好了
接下来,看看我们部署的效果:https://你的Github用户名.github.io 由于我们还未安装自己的主题,所以看到的是hexo的默认主题,效果如下,如果暂时无法部署远程仓库的话就只能在本地使用hexo s开启服务器,然后访问http://localhost:4000/ 来查看效果!
安装主题
下载主题
这个主题大家可以自由选择,我个人比较推荐使用next主题,它的Github地址我已经子在前言中给出,选择Clone or download下载zip包即可,解压之后会获得一个叫做hexo-theme-next-master的文件夹,我们直接将文件夹重命名为next即可,然后将next文件夹copy到我们的博客根目录下
修改配置文件
博客根目录下,有一个_config.yml文件,修改其中的属性theme: next,注意”:”后面有一个空格,修改之后保存!
重新生成资源
使用命令 hexo g 生成静态资源,主要是指html文件
重新部署
使用命令 hexo d 重新部署到远程仓库,当然如果只是测试效果的话暂时其实没必要立马就部署到仓库,我们只需要 hexo s 开启本地服务器,然后访问http://localhost:4000/ 即可,然后就可以访问到修改过主题之后的效果
到这里主题已经全部安装完成,但是界面是不是太过于简约了?接下来说说如何使用这些配置文件使博客变得更加美观!
hexo命令总结
命令简写 | 原始写法 | 用途解释 |
---|---|---|
hexo g | hexo generate | 生成静态资源,理解为生成静态网页即可 |
hexo d | hexo deploy | 部署到远程仓库,每次部署需要输入密码 |
hexo s | hexo server | 开启本地服务器,用于再无网络或者网速较慢的情况下快速查看博客效果 |
hexo new page “页面名” | hexo n page “页面名” | 匹配新菜单项的内容 |
hexo new “文章名称” | hexo n “文章名称” | 新建一篇文章 |
本地仓库配置文件与主题配置文件
本次仓库配置文件
博客根目录下,有一个_config.yml文件,打开之后我会做一个属性说明
我的配置文件如下
1 |
# Hexo Configuration |
需要修改的地方:博客名称、副标题、简介、博客作者、博客语言、时区、主题配置、Deployment(之前已经修
改好了)
主题配置文件
1 |
# 要显示的菜单:主页、关于、标签、分类、归档、日程、站内地图、公益404 |
额外说明
当上述步骤都完成之后,每次修改之后配置文件或者源文件的时候都需要使用hexo g命令重新生成静态资源,然后就可以在本地开启服务器进行预览
之后我们点击分别点击一下关于、标签、分类、日程,除了首页可以点击之外,其他的都会出现这样一个东西:Cannot GET /about/ 或者Cannot GET /categories/等等,这是由于我们没有在本地建立相关的静态文件导致的
还是在博客根目录下Git Bahs Here打开命令行,缺什么就新建什么,比如要新建关于、标签、分类、日程的页面
1 |
hexo new page "about" |
于是博客根目录下的source文件夹下就出现了about、tags、categories等文件夹,里分别有对应index.md文件
- img文件夹是存放博客中图片的文件夹,这个稍后我会做出介绍
- _ posts文件夹存放了我们写的博客,我们写的markdown文件就存放在此
- 关于就是about里面的index.md文件了,这个版式比较随意,可以自己随便写一些自我介绍
- 标签就是tags文件夹下的index.md文件,对于此文件我们需要做出如下修改
- 分类就是categories里面的index.md文件,与tags相同,我们只需要把 type: “categories” 这一句加上即可
注意:对于此类菜单里的页面来说,我们只需要做出一次修改即可,一旦把文章类型(即type属性)申明为tags、categories…hexo就会帮我们自动填充内容,会根据你文章的变化一起变化,无需我们手动进行修改!
博文相关操作
新建文章
接下来还得说说新建文章,毕竟搭建好了博客,不就是要写点东西嘛!
1 |
hexo new "文章名" |
新建好了之后,我们发现在source文件夹里面帮我们创建好了markdown文件,我们需要做的就是直接开始编辑markdown就好了,比如我新建了一个MyTestBlog
怎样对文章进行分类和添加标签呢?只需要做如下编辑
写的时候一定要注意格式,”:”后面都是有空格的
删除文章
这个没啥好说的,我们的所有文章都是放在source\_ posts\下面的,直接删除相应的markdown文件即可
编辑文章
基本语法
基本的markdown语法在这里不在赘述,基本语法请参照https://www.jianshu.com/p/0130ad32a08d 或者自行百度,很多博客都讲述了markdown的基本语法
插入图片
这个功能由于经常用到,我把它单独拿出来说一下,首先先在source文件夹下面新建一个文件夹用来存储图片,文件夹名称为img,其他名称也是可以的,然后将要插入的图片放在该文件夹下,命名不要太复杂,也不要有中文名称,比如将2018050899.png放进去,当我们需要插入图片的时候,只要按照如下写法就可以将图片插入了,在这里注意图片的书写路径,如果在本地预览的话需要写成这样的写法 (../img/2018050899.png) ,但是在服务器上的相对路径却不是这样,而是不需要上一级目录的标识,按照如下写法即可<感谢来自李仁单的建议>:
1 |
![图片无法正常显示的时候的说明文字](/img/2018050899.png) |
插入代码
如果我们已知是什么语言的代码(比如Java),就写上Java ;如果不知道的话也可以不写
1 |
public class Demo{ |
主题配置优化
添加搜索功能
首先我们需要安装一个hexo-generator-searchdb
1 |
npm install hexo-generator-searchdb --save |
修改本地配置文件,博客根目录下的_config.yml文件,如果没有就添加search属性并做如下配置:
search:
path: search.xml
field: post
format: html
limit: 10000
修改主题配置文件
我的路径:/博客根目录/themes/next下的_config.yml文件:
local_search:
enable: true
注意:每个冒号后面都有空格。如果next主题在5.1.1以上的话就不用我这样设置,直接在主题配置文件中找到canvas_nest: false,把它改为canvas_nest: true就行了
首页显示文章摘要
这样可以在首页更快的找到最近的文章,不至于篇幅太长
标签图标修改
默认的标签无图标,是一个”#”,这个是可以修改的:
修改模板 /themes/next/layout/_ macro/post.swig,搜索 rel=”tag”>#,将 # 换成
隐藏powered By Hexo / 强力驱动
打开themes/next/layout/_ partials/footer.swig,使用””隐藏之间的代码即可,或者直接删除。
动态背景
直接在主题配置文件中找到canvas_nest: false,把它改为canvas_nest: true就行了
注意分号后面要加一个空格
Github的服务器离我们比较远,hexo d提交后可能没有立即看到效果,等待几分钟就好了,推荐方法是直接在本地预览,都修改好了再提交到Github服务器,有时候浏览器有缓存,需要多次刷新才可以看到效果!!!
结语
以上就是我的博客的搭建全过程,以后会增加留言或者评论的功能,现在只能这样了,我的过程也不一定适用于每一个人,可能会有很多隐藏的问题,
文章来源:https://zouchanglin.github.io
Github+hexo+next搭建教程的更多相关文章
- 【原】Github+Hexo+NextT搭建个人博客
摘要 GitHub 是一个开源项目的托管网站,相信很多人都听过.在上面有很多高质量的项目代码,我们也可以把自己的项目代码托管到GitHub,与朋友们共享交流.GitHub Pages 是Github为 ...
- 【原】Github+Hexo+NextT搭建个人博客【1】
该系列博客列表请访问:http://www.cnblogs.com/penglei-it/category/934299.html 摘要 GitHub 是一个开源项目的托管网站,相信很多人都听过.在上 ...
- github+Hexo快速搭建个人博客
注意 本文主要针对Windows平台和Hexo 3.x 准备工作 下载Git [下载地址] [Git官网](https://git-scm.com/download/) 下载Node.js [下载地址 ...
- GitHub+Hexo+gulp搭建博客网站
一.前期准备 1.注册GitHub账号. 不做说明 2.创建仓库 创建一个新的仓库来放置我们的文件. 3.下载安装Node.js https://nodejs.org/en/ 两个版本,选择右边那 ...
- 使用Github+Hexo框架搭建部署自己的博客
前言 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown (或其他渲染引擎 )解析文章, 在几秒内,即可利用靓丽的主题生成静态网页. 安装 安装前提 安装 Hexo 相当简单 ...
- github+hexo+themes搭建简易个性主题博客
0x00 install Node.js and git 安装Node.js:http://www.runoob.com/nodejs/nodejs-install-setup.html 安装git ...
- Github+Hexo一站式部署个人博客(原创)
写在前面 注:博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 本文源链接:https://www.cnblogs.com/chloneda/p/hexo.ht ...
- GitHub+Hexo 搭建个人网站详细教程
原文链接 GitHub+Hexo 搭建个人网站详细教程 前言: 随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷.然后,如果你是一个不甘寂寞的程序猿(媛),是否也想要搭建 ...
- Github+Hexo,搭建专有博客
前言 记得从大二开始,就一直想搭个专属网站,当时使劲抠页面[前端页面是从QQ空间抠的,现在想抠估计没这么容易了],写代码,忙活半天才把程序弄好. 可惜最终项目还是没上线,因为当时有两问题绕不开 需要购 ...
随机推荐
- RN 47 中的 JS 线程及 RunLoop
RCBridge 初始化时声明了一个 CADisplayLink _jsDisplayLink = [CADisplayLink displayLinkWithTarget:self selector ...
- Linux系统NAT模式下设置网络网关
1.配置Vm网络编辑器 2.配置固定IP地址 命令:vi /etc/sysconfig/network-scripts/ifcfg-ens33 #下面内容直接复制进去,如果有重复的可以去除 TYPE= ...
- bash: wget: command not found
有些VPS执行wget命令下载时,提示-bash: wget: command not found错误,其实这是由于系统中没有安装wget,我们只要执行安装命令安装即可. yum -y install ...
- 剑指offer——面试题32.1:分行从上到下打印二叉树
void BFSLayer(BinaryTreeNode* pRoot) { if(pRoot==nullptr) return; queue<BinaryTreeNode*> pNode ...
- (转)zabbix之生产案例
原文: https://www.abcdocker.com/abcdocker/category/zabbix/ 原文: https://chegva.com/1170.html
- 将静态网页部署到git上访问
1.将已有的项目放在github上 http://www.cnblogs.com/zqunor/p/6583182.html 2.出现错误解决方案 提交错误 http://blog.csdn.net/ ...
- Set up the environment for driver compiling in Debian
1.check the kernel version $ uname -r --amd64 2.install the source code $ sudo apt-get install linux ...
- 对Table_locks_immediate值的理解
Table_locks_immediate表示立即释放表锁数,Table_locks_waited表示需要等待的表锁数,如果Table_locks_immediate / Table_locks_wa ...
- CSS动态控制DIV居中
1.所谓的动态:就是即使手动去拖拉浏览器,DIV还是会自动居中 2.之前一直以为这个事情是JavaScript做的, 步骤:通过先获取页面的Height和Width, 然后定义DIV的Height和W ...
- 查找checked的checkbox和raido
<fieldset id="checkArray"> <input type="checkbox" name="chk[]" ...