使用Hexo 搭建自己的博客
使用Hexo 搭建自己的博客
最近一直都想着如何去搭建属于自己的博客,有空的时候就写写文章什么的。
本人对该博客系统的要求是:
- 博文的编写要采用现在流行的
MarkDown
来进行编写。 - 本人还不想去注册域名和云服务器(这些可都是钱啊)。
- 博文系统需要开源且易上手的。
通过以上的这些分析,我采用了hexo
和github
来进行开发部署搭建自己的博文系统。
当然了网上也有很多教程,但是我觉得总结的还是有些不全面。现在我将结合我自己搭建好的博文系统综合总结。不喜勿喷。)
本机开发环境
- win10 家庭版
- node.js 6.9.2
- git 2.11.1
- github账户一枚
- hexo 1.0.2
先学习一些概念啊
什么是Hexo
Hexo 是一个简单地、轻量地、基于Node的一个静态博客框架,可以方便的生成静态网页托管在github和Heroku上,引用Hexo作者 @tommy351的话:
快速、简单且功能强大的 Node.js 博客框架。A fast, simple & powerful blog framework, powered by Node.js.
GitHub Pages是什么?
GitHub Pages 可以被认为是用户编写的、托管在github上的静态网页。由于它的空间免费稳定, 可以用于介绍托管在github上的Project或者搭建网站。有两种形式: Project Site 和 User/Org Site,二者之间的差异可以戳GitHub Pages 。基于 GP 创建Site是很方便的,这有一个简单的教程: 学习 Github Page 教你分分钟搭建自己的博客
gp 生成的网站的默认域名是 username.github.io 或者 username.github.io/project-name ,但gp是支持自定义域名的:Custom Domain Name 。购买域名之后,可以和默认的二级域名进行绑定,教程参考:购买域名、设置DNS
更多关于gp的信息,可以戳:Github Pages Help
上面哔哔了那么多,现在可以正式开始操练一把啦
1. 安装node.js
这个是必须的安装的哦。这个安装其实很简单,网上教程一大把我就不在此赘述了。node.js安装传送门
2. 安装git
这个是必须的安装的哦。这个安装其实很简单,网上教程一大把我就不在此赘述了。git安装传送门
3. hexo安装
- 在windows命令行中执行下面的命令
npm install -g hexo
- 查看是否安装成功,执行下面的命令
hexo --version
hexo 命令解释
help 查看帮助信息
init[文件名] 创建一个hexo项目,不指定文件名,则在当前目录下创建
version 查看hexo版本
--config config-path 指定配置文件、代替默认的_config.yml
--cwd cwd-path 自定义当前工作目录
--debug 调试模式,输出所有日志信息
--safe 安全模式,禁用所有的插件和脚本
--silent 无日志输出模式
4. 创建hexo项目
- 执行新建一个hexo项目命令
hexo init blogsDemo
项目内的目录结构如下:
通过上面的命令,我们创建一个hexo的blogsDemo项目,并且自动生成一篇博文hello word
。接下来我们需要在本地测试下这个项目能否跑得起来。
这个项目大概大小28.3M。如果哪位生成的时候报错或者大小差太多,那么请从新创建并且配置翻墙工具。
- 安装项目依赖库
npm install
- 本地测试博文系统
hexo server
在浏览器中输入:http://localhost:4000/
到此为止我们就完成了hexo开发环境搭建、测试工作。那么接下来我们讲下这个项目中的配置文件。
5. hexo目录文件解析
1、 scaffolds :模板文件夹,新建文章时,Hexo 会根据 scaffold 来建立文件。Hexo 有三种默认布局: post 、 page 和 draft ,它们分别对应不同的路径。新建文件的默认布局是 post ,可以在配置文件中更改布局。用 draft 布局生成的文件会被保存到 source/_drafts 文件夹。
2、 source :资源文件夹是存放用户资源的地方。
3、 source/_post :文件箱。(低版本的hexo还会存在一个 _draft ,这是草稿箱)除 _posts 文件夹之外,开头命名为 _ (下划线)的文件/ 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去
4、 themes :主题 文件夹。Hexo 会根据主题来生成静态页面。
5、 themes/landscape :默认的皮肤文件夹
6、 _config.yml :全局的配置文件,每次更改要重启服务。
低版本的Hexo还会生成scripts文件夹,里面用于保存扩展Hexo的脚本文件。
全局配置文件 _cofing.yml 解析
下面的代码文件详细的介绍了该配置文件的用法
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 站点配置
title: P了个F #网站标题
subtitle: 码农世界 #网站副标题
description: 我是一个来自体育世界的码农 #网站描述
author: 杨朋飞 #作者
language: zh-CN #网站使用的语言
timezone: Asia/Shanghai #网站时区
# URL #可以不用配置
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
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 #Incloude code 文件夹
i18n_dir: :lang #国际化文件夹
skip_render: #跳过指定文件的渲染,您可以使用glob来配置路径
# Writing 写配置
new_post_name: :title.md #新文章的文件名称
default_layout: post #默认布局
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0 #把文件名转换为(1)小写或(2)大写
render_drafts: false #显示草稿
post_asset_folder: false #是否启动资源文件夹
relative_link: false #把链接改为与根目录的相对地址
future: true
highlight: #代码块的设置
enable: true
line_number: true
auto_detect: false
tab_replace:
# Category & Tag 分类 & 标签
default_category: uncategorized #默认分类
category_map: #分类别名
tag_map: #标签别名
# Date / Time format 时间和日期
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination 分页
## Set per_page to 0 to disable pagination
per_page: 10 #每页显示的文章量(0=关闭分页功能)
pagination_dir: page #分页目录
# Extensions 扩展
## Plugins: https://hexo.io/plugins/ 插件
## Themes: https://hexo.io/themes/ 主题
theme: landscape #当前主题名称
# Deployment #部署到GitHub
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: http://github.com/yangpengfei/yangpengfei.github.io.git
branch: master
一般主题下有一个 languages 文件夹,用于对应 language 配置项。
主题配置
主题的配置文件在 /themes/主题文件夹/_config.yml ,一般包括导航配置(menu),内容配置(content),评论插件,图片效果(fancybox)和边栏(sidebar)。
Hexo提高了大量的主题,可以在全局配置文件中更改主题:
# Extensions 扩展
## Plugins: http://hexo.io/plugins/ 插件
## Themes: http://hexo.io/themes/ 主题
theme: 你的主题名称
主题的文件目录必须在 themes 目录下。 Hexo主题更换教程
更多Hexo主题戳此: Hexo Themes。
6. 新建一篇博文
- 在windows命令行中输入如下命令:
hexo new [layout] <title>
其中layout是可选参数,默认值为 post 。
如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,需用引号括起来。
Hexo提供的layout在 scaffolds 目录下,也可以在此目录下自建layout文件。新建的文件则会保存到 source/_post 目录下。
hexo new '第一篇博文'
使用sublimeText或者你认为其他好用的工具都行,接着就可以欢快的进行写博文啦~~~~
接着我们可以使用
hexo server
启动服务,就看在浏览器中看到我写的这个博文啦。小技巧
发表的文章会全部显示,如果文章很长,就只要显示文章的摘要就行了。在需要显示摘要的地方添加如下代码即可:
以上是摘要
<!--more-->
以下是全文
刷新,就能够看到只显示摘要了,同时会提供 Read More 的链接:
这个文字可以更改,在主题的配置文件( themes/主题文件夹/_config.yml )中,找到 Content :
# Content
excerpt_link: Read More #可以更改成想要显示的文字
fancybox: true
此外,可以修改文章的模板参数,打开 scaffolds/post.md ,增加类别和描述:
---
title: {{ title }}
date: {{ date }}
tags:
---
hexo generate
在本地目录下,会生成一个public的目录,里面包括了所有静态化的文件。
总结:
到此为止我们已经学习了:
- 如何创建hexo项目
- 如何设置全局配置文件
_config.yml
- 如何设置主题
- 如何发布一篇博文
- 如何将markdown格式的博文生成静态文件。
将hexo部署到github
注册Github账号
这里我们就不多讲了,小伙伴们可以点击这里,进入官网进行注册。
创建仓库
登录账号后,在Github页面的右上方选择New repository进行仓库的创建。
在仓库名字输入框中输入:
你的github用户名.github.io
然后点击Create repository
即可。
生成添加秘钥
在windows命令行中输入下面的命令
ssh-keygen -t rsa -C "Github的注册邮箱地址"
一路回车过来就好,待秘钥生成完毕,会得到两个文件id_rsa和id_rsa.pub,用带格式的记事本打开id_rsa.pub,Ctrl + a复制里面的所有内容,然后进入https://github.com/settings/ssh:
将复制的内容粘贴到Key的输入框,随便写好Title里面的内容,点击Add SSH key按钮即可。
配置_config.yml
deploy:
type: git
repo: http://github.com/yangpengfei/yangpengfei.github.io.git
branch: master
这里输入的地址我们需要注意:http和https,这里我选择的是http。由于我没有将ssl添加到github上面,所以我采用http。
安装hexo-deployer-git
npm install hexo-deployer-git --save
执行hexo deploy推送到 githu
hexo deploy
在执行这个命令的时候,会提示我们输入github的账号和密码。
以后我们需要写一篇博文怎么办???
- 只要在blog目录下的source_posts下面添加.md文件就行了,我们也可以使用 执行
hexo new
命令来创建并进行编写。 - 推送到github。
hexo clean
hexo generate
hexo deploy
参考文章
简洁轻便的博客平台: Hexo详解
hexo —— 简单、快速、强大的Node.js静态博客框架
20分钟教你使用hexo搭建github博客
HEXO+Github,搭建属于自己的博
Hexo折腾记——基本配置篇
使用Hexo 搭建自己的博客的更多相关文章
- Hexo搭建静态个人博客
Hexo简介 之前在Github上托管的博客就是使用jekyll搭建的,官方的Github Pages同样推荐使用它.我之前体验了一下jekyll,没有达到我想要的效果.于是寻找替代方案,搜索同类博客 ...
- github+hexo搭建自己的博客网站(六)进阶配置(搜索引擎收录,优化你的url)
详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定了域名: http://www.chengxinsong.cn hexo+github博客网站源码(可以clo ...
- github+hexo搭建自己的博客网站(七)注意事项(避免read.me,CNAME文件的覆盖,手动改github page的域名)
详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定域名可以查看:http://www.chengxinsong.cn 可以查看在github上生成的静态文件(如 ...
- 使用GitHub+hexo搭建个人独立博客
前言 使用github pages服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 可以随意绑定自己的域名,不仔细看的话 ...
- 使用Hexo搭建Github静态博客
1. 环境环境 1.1 安装Git 默认配置就好 1.2 安装node.js 下载:http://nodejs.org/download/ 安装时直接保持默认配置即可. 2. 配置Github 1.1 ...
- Hexo搭建Github静态博客
1. 环境环境 1.1 安装Git 请参考[1] 1.2 安装node.js 下载:http://nodejs.org/download/ 可以下载 node-v0.10.33-x64.msi 安装时 ...
- github+hexo搭建自己的博客网站(一)基础入门
github提供的page,hexo提供的静态博客文档,这样可以搭建一个自己的一个博客网站. 使用github pages服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可 ...
- 转--利用hexo搭建个人静态博客
引用地址 可谓图文并茂,可以配合 七牛云存储(做图片等文件服务器),搭建好看的个人博客 hexo 官方指导文档 主题 官网教程 问题集锦 简书 http://blog.csdn.net/wx_9624 ...
- 使用hexo搭建github个人博客网站
搭建步骤: 1>Mac或win电脑一台,本文以mac为例. 2>下载安装Git和Node 3>安装hexo 4>注册登录GitHub,创建一个仓库,库名格式为:GitHub用户 ...
随机推荐
- assign,copy,strong,weak,nonatomic的具体理解
例子: NSString *houseOfMM = [[NSString alloc] initWithString:'MM的三室两厅']; 上面一段代码会执行以下两个动作: 1 在堆上分配一段内存 ...
- MySQL索引优化-from 高性能MYSQL
Btree: 1. 尽量使用覆盖索引, 即三星索引 2. 多列索引如果带范围的话, 后续列不会作为筛选条件 3. 多列索引应选择过滤性更好的充当前缀索引 4. 尽量按主键顺序插入, 减少页分裂, 采用 ...
- Django_model基础
Django-model基础 ORM 映射关系: 表名 <-------> 类名 字段 <-------> 属性 表记录 <------->类实例对象 创建表( ...
- java IO流文件的读写具体实例(转载)
引言: 关于java IO流的操作是非常常见的,基本上每个项目都会用到,每次遇到都是去网上找一找就行了,屡试不爽.上次突然一个同事问了我java文件的读取,我一下子就懵了第一反应就是去网上找,虽然也能 ...
- 【转载】Android进程保活招式大全
原文地址:http://dev.qq.com/topic/57ac4a0ea374c75371c08ce8 目前市面上的应用,貌似除了微信和手Q都会比较担心被用户或者系统(厂商)杀死问题.本文对 An ...
- blog.codedream.ren
博客将转到 CodeDream ,新的链接是 http://blog.codedream.ren
- 关于yolo 模型中1X1卷积层的作用
1X1卷积层的作用: 1.实现跨通道的交互和信息整合.2.进行卷积核通道数的降维和升维.3.就是可以在保持feature map 尺寸不变(即不损失分辨率)的前提下大幅增加非线性特性,把网络做得很de ...
- starUML安装与破解
安装包百度云: 链接:https://pan.baidu.com/s/1oF_DH7Xh6yun6fFUDB2H3w 密码:1z7e 破解步骤:1. 首先打开你的starUML安装目录,并找到Lice ...
- FFmpeg+FFserver流媒体服务器介绍
ffmpeg和ffserver配合使用可以实现实时的流媒体服务. 一.理解 里边主要有如下四个东西,搞清楚他们之间的关系就差不多明白了. 1. ffmpeg 2. ffserver 3. ...
- JAVA 内部类 (一)
可将一个类定义置入另一个类定义中.这就叫作“内部类”.内部类对我们非常有用,因为利用它可对那些逻辑上相互联系的类进行分组,并可控制一个类在另一个类里的“可见性”.然而,我们必须认识到内部类与以前讲述的 ...