今天参考的是大神的教程,学了一个新东西,但是可能由于原教程中运用的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
2
git config --global user.name "你的Github用户名"
git config --global user.email "你注册Github使用的邮箱"
  • 生成ssh密钥
1
ssh-keygen -t rsa -C "你注册Github使用的邮箱"


找到刚才生成的ssh密匙文件,复制其中的全部内容

按照图片所示操作





出现上图即配置完毕

配置Deploy

在博客根目录下找到_config.yml文件中,找到deploy,修改为

1
2
3
4
deploy:
type: git
repo: repo: https://github.com/你的Github用户名/你的Github用户名.github.io.git
branch: master

开始部署

当上述操作都完成之后,输入命令 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/ #博客名称
title: MyBlog
#副标题
subtitle: 一生只做浪漫极客
#简介
description: 发现累积的力量
#博客作者
author: Tim
#博客语言
language: zh-Hans
#时区
timezone: Asia/Shanghai<感谢姚栓同学的提醒,之前把Shanghai写成了Shanggai> # URL
## 如果你的网站被放置在一个子目录中,将URL设置为“HTTP://YouSIT.COM/CHED”,并将根设置为“/CHOR/\”。
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults: # Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: # Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace: # Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date # Category & Tag
default_category: uncategorized
category_map:
tag_map: # 日期时间格式
date_format: YYYY-MM-DD
time_format: HH:mm:ss # 分页,每页文章数量
per_page: 10
pagination_dir: page # 主题配置
theme: next # Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:LiLiLiLaLa/LiLiLiLaLa.github.io.git
branch: master

需要修改的地方:博客名称、副标题、简介、博客作者、博客语言、时区、主题配置、Deployment(之前已经修

改好了)

主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 要显示的菜单:主页、关于、标签、分类、归档、日程、站内地图、公益404
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
# Schemes(自己选择一种排版风格,我比较喜欢Mist这种)
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

额外说明

当上述步骤都完成之后,每次修改之后配置文件或者源文件的时候都需要使用hexo g命令重新生成静态资源,然后就可以在本地开启服务器进行预览

之后我们点击分别点击一下关于、标签、分类、日程,除了首页可以点击之外,其他的都会出现这样一个东西:Cannot GET /about/ 或者Cannot GET /categories/等等,这是由于我们没有在本地建立相关的静态文件导致的

还是在博客根目录下Git Bahs Here打开命令行,缺什么就新建什么,比如要新建关于、标签、分类、日程的页面

1
2
3
hexo new page "about"
hexo new page "tags"
hexo new page "categories"


于是博客根目录下的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
2
3
4
5
public class Demo{
public static void main(String[]args){
System.out.println("Test Code");
}
}

主题配置优化

添加搜索功能

首先我们需要安装一个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搭建教程的更多相关文章

  1. 【原】Github+Hexo+NextT搭建个人博客

    摘要 GitHub 是一个开源项目的托管网站,相信很多人都听过.在上面有很多高质量的项目代码,我们也可以把自己的项目代码托管到GitHub,与朋友们共享交流.GitHub Pages 是Github为 ...

  2. 【原】Github+Hexo+NextT搭建个人博客【1】

    该系列博客列表请访问:http://www.cnblogs.com/penglei-it/category/934299.html 摘要 GitHub 是一个开源项目的托管网站,相信很多人都听过.在上 ...

  3. github+Hexo快速搭建个人博客

    注意 本文主要针对Windows平台和Hexo 3.x 准备工作 下载Git [下载地址] [Git官网](https://git-scm.com/download/) 下载Node.js [下载地址 ...

  4. GitHub+Hexo+gulp搭建博客网站

    一.前期准备 1.注册GitHub账号. 不做说明 2.创建仓库 创建一个新的仓库来放置我们的文件. 3.下载安装Node.js https://nodejs.org/en/   两个版本,选择右边那 ...

  5. 使用Github+Hexo框架搭建部署自己的博客

    前言 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown (或其他渲染引擎 )解析文章, 在几秒内,即可利用靓丽的主题生成静态网页. 安装 安装前提 安装 Hexo 相当简单 ...

  6. github+hexo+themes搭建简易个性主题博客

    0x00  install Node.js and git 安装Node.js:http://www.runoob.com/nodejs/nodejs-install-setup.html 安装git ...

  7. Github+Hexo一站式部署个人博客(原创)

    写在前面 注:博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 本文源链接:https://www.cnblogs.com/chloneda/p/hexo.ht ...

  8. GitHub+Hexo 搭建个人网站详细教程

    原文链接 GitHub+Hexo 搭建个人网站详细教程 前言: 随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷.然后,如果你是一个不甘寂寞的程序猿(媛),是否也想要搭建 ...

  9. Github+Hexo,搭建专有博客

    前言 记得从大二开始,就一直想搭个专属网站,当时使劲抠页面[前端页面是从QQ空间抠的,现在想抠估计没这么容易了],写代码,忙活半天才把程序弄好. 可惜最终项目还是没上线,因为当时有两问题绕不开 需要购 ...

随机推荐

  1. RN 47 中的 JS 线程及 RunLoop

    RCBridge 初始化时声明了一个 CADisplayLink _jsDisplayLink = [CADisplayLink displayLinkWithTarget:self selector ...

  2. Linux系统NAT模式下设置网络网关

    1.配置Vm网络编辑器 2.配置固定IP地址 命令:vi /etc/sysconfig/network-scripts/ifcfg-ens33 #下面内容直接复制进去,如果有重复的可以去除 TYPE= ...

  3. bash: wget: command not found

    有些VPS执行wget命令下载时,提示-bash: wget: command not found错误,其实这是由于系统中没有安装wget,我们只要执行安装命令安装即可. yum -y install ...

  4. 剑指offer——面试题32.1:分行从上到下打印二叉树

    void BFSLayer(BinaryTreeNode* pRoot) { if(pRoot==nullptr) return; queue<BinaryTreeNode*> pNode ...

  5. (转)zabbix之生产案例

    原文: https://www.abcdocker.com/abcdocker/category/zabbix/ 原文: https://chegva.com/1170.html

  6. 将静态网页部署到git上访问

    1.将已有的项目放在github上 http://www.cnblogs.com/zqunor/p/6583182.html 2.出现错误解决方案 提交错误 http://blog.csdn.net/ ...

  7. 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 ...

  8. 对Table_locks_immediate值的理解

    Table_locks_immediate表示立即释放表锁数,Table_locks_waited表示需要等待的表锁数,如果Table_locks_immediate / Table_locks_wa ...

  9. CSS动态控制DIV居中

    1.所谓的动态:就是即使手动去拖拉浏览器,DIV还是会自动居中 2.之前一直以为这个事情是JavaScript做的, 步骤:通过先获取页面的Height和Width, 然后定义DIV的Height和W ...

  10. 查找checked的checkbox和raido

    <fieldset id="checkArray"> <input type="checkbox" name="chk[]" ...