Hexo 是一个快速、简洁且高效的博客框架。Hexo是基于Node的框架,使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
Hexo具有以下优点:
基于以上特点,推荐使用Hexo博客框架。
推荐https://easyhexo.com/,教程很nice
Node.js
在Node官网下载对应系统最新版安装即可
Git
在Git官网下载对应系统最新版安装即可
在本地安装Hexo,在Git bash窗口下运行命令
npm install -g hexo-cli
在一个空文件夹(可以新建,例:Hexo)下,点击右键,运行Git bash,输入命令:
hexo init
就会从官网下载Hexo 模板,
下载完再运行
hexo server
启动成功。
打开浏览器,输入local host:4000(Hexo服务器默认端口为4000),就能看到博客页面,只不过现在的页面是默认的模板,没有任何你自己的东西。
在Git hub下创建仓库,仓库名字必须为 [用户名].github.io
,
在本地Hexo
文件夹下打开_config.yml
文件,在deploy输入以下代码
deploy:
type: git
repository: https://github.com/tengzhangchao/tengzhangchao.github.io.git
branch: master
保存文件,关闭
打开Git bash,使用npm
安装发布模块,运行
npm install hexo-deployer-git --save
安装模块,安装完后运行
hexo clean //清理puclic文件夹下的文件,预备
hexo generate //由你的md文件在public下生成html等文件
hexo deploy //将本地的public下生成的传到Github仓库里
在首次运行Hexo deploy时会提醒你需要输入Git hub用户名及密码。
运行完后在浏览器输入[用户名].github.io
即可访问
绑定个人域名需在域名与Git hub仓库、本地文件夹三个地方分别设置
首先Ctrl+R,打开CMD窗口,使用ping方法寻找你的博客ip地址,
我在ping的时候发现我的博客地址在185.199.108.153,185.199.109.153,185.199.110.153,185.199.111.153四个IP地址自动转换,后来在网上查找发现这是Git hub 的四个IP,所以我把我的个人域名下把这四个IP全部解析,解析时选择添加A类型地址及@、www属性
我的Namesilo域名配置
特别注意: 有的人用腾讯云免费解析(非腾讯云购买),但是只能解析两个类型,所以最好在你购买的域名商下解析
方式一: 在Git hub之前建立的仓库下,custom domain下输入个人域名
方式二: 然后在对应的仓库下建立一个CNAME文件,文件内容为个人域名,
另外需要注意的是,CNAME文件在本地也需建立,因为发布时是把本地的文件夹hexo/public
上传在Git hub仓库里,所以在本地文件夹也新建。
Hexo默认的主题为landscape,我个人不是很喜欢这个主题,特别推荐使用较多的Next主题,以及我个人使用的icarus主题
Hexo-theme-icarus 是一个优秀的 Hexo 主题,开发者 Ruipeng Zhang 同时还维护了 hexo-theme-hueman 和 hexo-theme-minos 两个项目。
icarus 是一个三栏结构的自适应主题,预置了大量第三方插件,可以方便使用者快速建站。整体风格简约,适合各种类型的站点,无论是技术文章,还是摄影佳作,都可以完美承载。
效果图
在命令行中cd至博客根目录,加载主题:
git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
安装完theme文件夹下多了Icarus文件夹,Icarus文件结构:
├─includes
├─languages
├─layout
│ ├─comment
│ ├─common
│ ├─donate
│ ├─plugin
│ ├─search
│ ├─share
│ └─widget
├─sripts
└─source
├─css
├─images
└─js
在博客根目录下的 _config.yml
文件中做两件事情:
language: zh-CN
theme: icarus
方式一: 在Hexo目录下打开Git bash,运行
hexo new [post] [博客名字]
方式二:
在source/_posts
文件夹新建.md文件,运行博客服务器时会自动加载
打开Hexo/themes/icarus/
目录下的_config.yml
文件,
# Version of the Icarus theme that is currently used
version: 2.3.0
# 你的网站图标,可以搜索在线图标制作,并将其放在images文件夹中
favicon: /images/favicons.ico
# Path or URL to RSS atom.xml
rss: /atom.xml
# 显示在导航栏左侧的网站logo,同样可以自己制作
logo: /images/gen.svg
# Open Graph metadata
# https://hexo.io/docs/helpers.html#open-graph
open_graph:
# Facebook App ID
fb_app_id:
# Facebook Admin ID
fb_admins:
# Twitter ID
twitter_id:
# Twitter site
twitter_site:
# Google+ profile link
google_plus:
# 导航栏
navbar:
#菜单(显示名称:对应文件夹)
menu:
主页: /
归档: /archives
分类: /categories
标签: /tags
关于: /about
# 导航栏右侧图标链接
links:
My GitHub:
icon: fab fa-github
url: '你的gityhub地址'
# Footer section link settings
footer:
# 页脚图标链接
links:
Creative Commons:
icon: fab fa-creative-commons
url: 'https://creativecommons.org/'
Attribution 4.0 International:
icon: fab fa-creative-commons-by
url: 'https://creativecommons.org/licenses/by/4.0/'
Download on GitHub:
icon: fab fa-github
url: 'http://github.com/ppoffice/hexo-theme-icarus'
# 文章显示设置
article:
# Code highlight theme
# https://github.com/highlightjs/highlight.js/tree/master/src/styles
#代码主题atom-one-light亮色,atom-one-dark暗色
highlight: atom-one-dark
# 是否显示文章主图
thumbnail: true
# 是否显示估算阅读时间
readtime: true
# 搜索插件设置
# http://ppoffice.github.io/hexo-theme-icarus/categories/Configuration/Search-Plugins
search:
# Name of the search plugin
type: insight
# 评论插件设置
# http://ppoffice.github.io/hexo-theme-icarus/categories/Configuration/Comment-Plugins
comment:
#可选valine,disqus(科学上网)等
# Name of the comment plugin
#type: valine
#app_id: 不为空
#app_key: 不为空
#notify: true
#verify: true
#placeholder:
type: disqus
shortname: 不能为空
# 打赏功能
# http://ppoffice.github.io/hexo-theme-icarus/categories/Donation/
donate:
-
# 阿里巴巴支付宝
type: alipay
# 二维码图片
qrcode: '/images/honbao.PNG'
-
# 微信
type: wechat
# 二维码图片
qrcode: '/images/yjtp.png'
-
# 分享插件设置
# http://ppoffice.github.io/hexo-theme-icarus/categories/Configuration/Share-Plugins
share:
# 插件类型,有多种,可选,自行百度
type: sharejs
# Sidebar settings.
# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:
# 左侧边栏设置
left:
# 是否不随页面滚动
# http://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
sticky: false
# 右侧边栏设置
right:
# 是否不随页面滚动
# http://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
sticky: false
# 边栏小部件设置
# http://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
widgets:
-
# 个人信息
type: profile
# 部件位置(左)
position: left
# 作者名(字符串)
author: 飞鱼
# 作者身份描述(字符串)
author_title: Student
# 作者当前居住地
location: China,Fujian
# 头像(可用本地图片或网络图片链接)
avatar: '/images/ava.png'
# Email address for the Gravatar to be shown in the profile widget
gravatar:
# 关注我的链接,可设为你的GitHub主页
follow_link: 'https://github.com/yourname'
# 个人介绍部件底部图标社交链接
social_links:
Github:
icon: fab fa-github
url: 'https://github.com/yourname'
Facebook:
icon: fab fa-facebook
url: 'https://facebook.com'
Twitter:
icon: fab fa-twitter
url: 'https://twitter.com/yourname'
RSS:
icon: fas fa-rss
url: /
-
# Widget name
type: toc
# Where should the widget be placed, left or right
position: left
-
# 分类
type: category
# 位置指定
position: left
-
# 标签云
type: tagcloud
# 位置
position: right
-
# 近期文章
type: recent_posts
# 位置
position: left
-
# 归档
type: archive
# Where should the widget be placed, left or right
position: right
-
# 标签
type: tag
# Where should the widget be placed, left or right
position: right
-
# 外部链接
type: links
# Where should the widget be placed, left or right
position: left
# Links to be shown in the links widget
links:
Google: 'https://google.com'
Baidu: 'https://baidu.com'
所有的 widget 都是一个卡片,可以自由摆放在任何位置:
在_config.yml
文件下修改
language:
zh-cn
默认的Icarus首页和文章页是三栏布局,文章页三栏布局有点窄,不利于观看,因为修改为两栏并调整列宽
修改两栏:
修改themes\icarus\includes\helpers\layout.js
hexo.extend.helper.register('column_count', function () {
let columns = 1;
+ if (this.page.__post === true || this.page.__page === true) {
+ return 2;
+ }
const hasColumn = hexo.extend.helper.get('has_column').bind(this);
columns += hasColumn('left') ? 1 : 0;
columns += hasColumn('right') ? 1 : 0;
return columns;
});
修改themes\icarus\layout\common\widget.ejs
<% if (position === 'left') { %>
- <div class="column-right-shadow is-hidden-widescreen <%= sticky_class('right') %>">
+ <div class="column-right-shadow <%= (page.__page !== true && page.__post !== true) ? 'is-hidden-widescreen' : '' %> <%= sticky_class('right') %>">
<% get_widgets('right').forEach(widget => {%>
<%- _partial('widget/' + widget.type, { widget }) %>
<% }) %>
</div>
<% } %>
修改themes\icarus\layout\layout.ejs
<section class="section">
<div class="container">
<div class="columns">
<div class="column <%= main_column_class() %> has-order-2 column-main"><%- body %></div>
<%- _partial('common/widget', { position: 'left' }) %>
+ <% if (page.__page !== true && page.__post !== true) { %>
<%- _partial('common/widget', { position: 'right' }) %>
+ <% } %>
</div>
</div>
</section>
修改文章页列宽
修改themes/icarus/layout/layout.ejs
<head>
<%- partial('common/head') %>
</head>
-<body class="is-<%= column_count() %>-column">
+<body class="is-3-column">
<%- partial('common/navbar', { page }) %>
case 2:
- return 'is-8-tablet is-8-desktop is-8-widescreen';
+ return 'is-8-tablet is-8-desktop is-9-widescreen';
case 3:
return 'is-8-tablet is-8-desktop is-6-widescreen'
}
修改themes\icarus\layout\common\widget.ejs
<% if (get_widgets(position).length) { %>
<% function side_column_class() {
switch (column_count()) {
case 2:
- return 'is-4-tablet is-4-desktop is-4-widescreen';
+ return 'is-4-tablet is-3-desktop is-3-widescreen';
case 3:
return 'is-4-tablet is-4-desktop is-3-widescreen';
}
return '';
} %>
修改themes/icarus/source/css/style.styl
<head>
<%- partial('common/head') %>
</head>
-<body class="is-<%= column_count() %>-column">
+<body class="is-3-column">
<%- partial('common/navbar', { page }) %>
case 2:
- return 'is-8-tablet is-8-desktop is-8-widescreen';
+ return 'is-8-tablet is-8-desktop is-9-widescreen';
case 3:
return 'is-8-tablet is-8-desktop is-6-widescreen'
}
默认的14px字号我感觉略小,改为15px
修改\themes\icarus\source\css\style.styl
中:
html
font-size: 15px
在_config.yml
文件下修改
index_generator:
path: ''
per_page: 5
order_by: -date
hexo new page [name]
logo 会展示在顶部导航栏的最左侧以及底部的footer区域,大家可以替换 source/images/
下的 logo 文件,使用 svg 或者 png 格式的都可以。
或者给 logo 添加 text
属性,就会优先展示预设文字作为 logo:
logo:
text: your name
在 /layout/widget/profile.ejs文件中, 在倒数第二个
</div>
<% } %>
+ <hr>
+ <p id="evan">IT学徒、斜杠青年</p>
<p id="evan">机器人爱好者、摄影爱好者</p>
<p id="evan">PS、PR、LR、达芬奇潜在学习者</p>
</div>
</div>
icarus默认提供多个分享插件。
ShareThis
在Icarus主题文件中找到share,配置
_config.yml
share:
type: sharejs
如果你觉得分享图标太多,可以隐去一些
<div class="social-share" data-disabled="tencent,linkedin,douban,diandian,google"></div>
在_config.yml
文件中配置:
donate:
-
type: alipay
qrcode: /images/alipay.JPG
-
type: wechat
qrcode: /images/wechat.JPG
-
# type: paypal
# Paypal business ID or email address
# business: ''
# Currency code
# currency_code: USD
-
# type: patreon
# URL to the Patreon page
# url: ''
运行命令:
npm install --save hexo-blog-encrypt
在 _config.yml
中启用该插件(没有自己添加):
# Security##encrypt: enable: true
在你的文章的头部添加上对应的字段,如 password, abstract, message
---title: hello world
date: 2016-03-30 21:18:02
tags:
- - fdsafsdaf
password: Mike
abstract: Welcome to my blog, enter password to read.
message: Welcome to my blog, enter password to read.---
打开icarus/layout/common/footer.ejs
,添加以下代码:
<div style="text-align: center;">
<br>
<p class="is-size-7">
<% if (busuanzi) { %>
<span id="busuanzi_container_site_uv">
<i class="fa fa-user"></i> 本站访客数 <span id="busuanzi_value_site_uv"></span> 人次
</span>
<span id="busuanzi_container_site_pv">
| <i class="fa fa-eye"></i> 本站总访问量
<span id="busuanzi_value_site_pv"></span> 次
</span>
<% } %>
</p>
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("3/2/2020 08:00:00");// 此处修改你的建站时间或者网站上线时间
now.setTime(now.getTime()+250);
days = (now - grt) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "本站已安全运行"+dnum+"天";
document.getElementById("times").innerHTML = hnum + "小时" + mnum + "分" + snum + "秒";
}
setInterval("createtime()",250);
</script>
</div>
安装插件hexo-hide-posts
$ npm install hexo-hide-posts --save
使用:在你的博客前添加hidden属性
title: 'Lorem Ipsum'
date: '2019/8/10 11:45:14'
hidden: true
Github原文地址:https://github.com/printempw/hexo-hide-posts
获取地址
hexo-admin
gitpage托管的网站默认会被google收录,在搜索引擎中输入site: 你的域名 就可以找到,百度不会
https://www.xiemingzhao.com/posts/HexoblogSE.html
RSS订阅是站点用来和其他站点之间共享内容的一种简易方式,即Really Simple Syndication(简易信息聚合)
$ npm install hexo-generator-feed
等待安装完成后,打开hexo目录下配置文件的_config.yml,在末尾添加以下配置:
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
Hexo-generator-sitemap 和Hexo-generator-baidu-sitemap
https://v2ex.com/t/699961#reply4
mkdocs是基于python的编译器。比Hugo慢,也没hexo那样基于Node拓展性强,因为我涉及到这方面的工作,所以只是一个记录
启动mkdocs项目需要python和pip的支持,所以不管是windows或者linux,要支持这些
码云是国内的代码托管网站,也可以托管静态博客,与github托管的功能类似。最重要的是对于国内的用户访问速度会比github快,所以可以尝试一下。
如果你之前hexo配置好了,你只需要做两件事情
由于gitee也是使用git作为版本管理工具,所以不需要改用其他版本管理工具。
添加gitee远程仓库关联
git remote add github git@gitee.com:yefcion/Poweron.gits
修改站点配置文件 _config.yml,把原来github的repo注释掉,新加gitee的仓库链接
deploy:
type: git
# repo: https://github.com/zhengqingya/zhengqingya.github.io # github仓库
repo: https://gitee.com/zhengqingya/blog # 码云仓库
branch: master
message:
发布到仓库
hexo deploy
在仓库的gitpage服务下面点击更新
托管到Netlify有一个好处是能够使用NetlifyCMS管理静态博客文件,进而可以远程编辑,Netlify会获取你的Git仓库很多权限。
在hexo中添加依赖
npm install hexo-netlify-cms --save
#或者
yarn add hexo-netlify-cms
在config_yml中添加配置
netlify_cms:
backend:
name: git-gateway
branch: master
在Netlify中开启netlify git-gateway服务
添加netlify-identity-widget.js, 代码如下
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
现在Netlify CMS已经好了, 你可以访问your-site/admin
查看
非常简单
登录vercel(github)-New Project-import-deploy
开发一款属于你的hexo主题吧~
Hexo 使用主流的模板引擎,如: EJS
、 Jade
、 Swing
等,Hexo 的页面都是通过模板引擎渲染出来的页面,它可以实现一些代码的复用。
“E” 代表什么?可以表示 “可嵌入(Embedded)”,也可以是“高效(Effective)”、“优雅(Elegant)”或者是“简单(Easy)”。EJS 是一套简单的模板语言,帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条;也没有再造一套迭代和控制流语法;有的只是普通的 JavaScript 代码而已。
标签
<%
'脚本' 标签,用于流程控制,无输出。<%_
删除其前面的空格符<%=
输出数据到模板(输出是转义 HTML 标签)<%-
输出非转义的数据到模板<%#
注释标签,不执行、不输出内容<%%
输出字符串 '<%'%>
一般结束标签-%>
删除紧随其后的换行符_%>
将结束标签后面的空格符删除除了ejs语法,还有hexo特有的一些语法
辅助函数:
url_for
:输出路径
partial
:载入其他模版文件
css
:载入css文件
js
:载入js文件
data_xml
:插入 XML 格式的日期
变量
page
:针对该页面的内容以及 front-matter 所设定的变量config
:网站配置(hexo的_config.yml)theme
:主题配置(theme的_config.yml)url
:当前页面的完整网址path
:当前页面的路径(不含根路径)post.title
:文章的题目post.excerpt
:文章的摘要,即写文章的时候<!--more-->
之上的那段儿,首页显示post.comments
:评论模块post.photots
:文章中插入的图片post.content
:文章内容post.date
:文章的时间主题的文件全部在theme文件夹下,
layout.ejs
在layout文件夹下,布局被写在layout.ejs中,由于hexo支持模块儿化布局,使用hexo提供的局部函数partial
载入其他模版文件,配合ejs的语法,布局文件layout.ejs
Index.ejs
首页
Post.ejs
文章页
Archive.ejs
归档页
Tag.ejs
标签页
Page.ejs
其他页面
他山之石,可以攻玉。在编写时要参考现有的优秀的博客主题,如Next、icarus