博客建站简明攻略
简介
GitHub Pages
GitHub Pages是 GitHub 为个人主页或项目主页提供的免费静态资源空间,可配合博客系统搭建自己的博客网站。
Hexo
Hexo 是基于 Node.js 的博客系统,只需简单的几个命令即可完成博客的生成与部署。Hexo 本地将博客生成静态页面,然后再将其部署至 GitHub。
GoDaddy
GoDaddy 是一家域名服务商,支持支付宝结算。GitHub Pages 会提供一个二级域名供外界访问 http://username.github.io ,如果你不满意这个默认域名,可以自行购买一个,然后与 GitHub 绑定使用。
(也可以申请免费域名,例如.tk/co.cc等,但由于免费的特质,经常被视为垃圾网站。)
DNSPod
DNSPod是国内域名解析服务提供商,现被腾讯收购了,其免费服务够用。主要是 GoDaddy 自己的域名解析不稳定,而且速度也会受墙影响。
Cmd Markdown
本站撰写文章时所用语言为Markdown,通过Cmd Markdown可以方便地学习该语言,并实时预览效果。
修改googleapi为sinaapp
由于众所周知的原因,google服务在某地区受阻,导致网页加载较慢。
解决方案:
googleapifont
在
hexo\themes\....\source\css\_base\variable.styl
中,注释掉这句:
//@import url("https://fonts.googleapis.com/css?family=Droid+Serif:400italic,700italic,400,700")
之后页面会直接加载网站下的:
http://ibruce.info/css/fonts/fontawesome-webfont.eot
google jquery
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
在
hexo\themes\....\layout\_partial\add_jquery.ejs
(或者
index.ejs
等)中将
修改为新浪的
<script src="//lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>
即可。
F.A.Q. s
Hexo降级3.0 to 2.8
1、备份Hexo
2、卸载Hexo
npm uninstall hexo hexo-cli hexo-server hexo-generator-index hexo-generator-archive hexo-generator-category hexo-generator-tag hexo-deployer-git hexo-generator-feed hexo-generator-sitemap hexo-renderer-marked hexo-renderer-stylus
3、初始化Hexo目录,安装npm
hexo init
npm install
4、卸载高版本插件
npm uninstall hexo-renderer-ejs hexo-renderer-marked hexo-renderer-stylus
5、安装指定版本插件
npm install [email protected] [email protected] [email protected] [email protected] [email protected]
参考
Zippera’s blog
本人正是通过Zippera了解到Hexo的。
Deffi
提供了Bs-light主题和其他一些主题修改建议。
hexo你的博客
如何搭建一个独立博客
上面这两篇写的非常详尽,推荐一下。
Hexo在github上构建免费的Web应用
Hexo 飒爽登场!
Hexo作者自己的网站。
Hexo添加多说评论框指南
代码测试:
#include <stdio.h>
int main()
{
printf("Hello World!");
return 0;
}
Hexo搭建博客经验总结
这是一篇个人总结,不适合用作入门教程;
需要更详细的资料请 点击这里
安装
系统环境 win8.1 64bit
文本编辑器推荐使用 Sublime Text,
Hexo的文件编码格式为
UTF-8
Git
安装 GitHub for Windows,
登录后会自动在本地配置好 SSH,执行
git shell
时也不需要-config用户名和邮箱
新建仓库,Github Pages 的仓库名必须为
your_user_name.github.io
配置 SSH,参考 SSH配置教程
Node.js
安装 Node.js,Node 安装包里带有 npm
Hexo
安装 Hexo
npm
install -g hexo
查看 Node 版本
node -v
查看 Hexo 版本
hexo
version
创建项目
hexo
init hexo-lcx
进入目录
cd hexo-lcx
也可以先进目录再初始化项目
cd hexo-lcx
hexo init
安装依赖包
npm
install
以后所有的命令都在该目录下进行
启动服务
hexo
server
用浏览器打开
http://localhost:4000/
或者
http://127.0.0.1:4000/
就能看到网页了
推荐使用现代化浏览器(Chrome)获得最佳效果
按
Ctrl+C
停止本地预览服务
使用
目录结构
.
├── .deploy
#需要部署的文件
├── node_modules
#Hexo插件
├──
public
#生成的静态网页文件
├── scaffolds
#模板
├── source
#博客正文和其他源文件,404、favicon、CNAME 都应该放在这里
| ├── _drafts
#草稿
| └── _posts
#文章
├── themes
#主题
├── _config.yml
#全局配置文件
└──
package.json
全局配置 _config.yml
配置文件的冒号“:”后面有空格
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site #站点信息
title: Lcx's Blog
#标题
subtitle: 做人不卖萌和咸鱼有什么区别
#副标题
description: lmintlcx blog
#站点描述,给搜索引擎看的
author: lmintlcx
#作者
email: [email protected]
#电子邮箱
language: zh-CN
#语言
# URL #链接格式
url: http:
//lmintlcx.com #网址
root: /
#根目录
permalink: :year/:month/:day/:title/
#文章的链接格式
tag_dir: tags
#标签目录
archive_dir: archives
#存档目录
category_dir: categories
#分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source
#源文件目录
public_dir: public
#生成的网页文件目录
# Writing #写作
new_post_name: :title.md
#新文章标题
default_layout: post
#默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿)
titlecase:
false
#标题转换成大写
external_link:
true
#在新选项卡中打开连接
filename_case:
0
render_drafts:
false
post_asset_folder:
false
relative_link:
false
highlight:
#语法高亮
enable:
true
#是否启用
line_number:
true
#显示行号
tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized
#默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive:
2
category:
2
tag:
2
# Server #本地服务器
port:
4000
#端口号
server_ip: localhost
#IP 地址
logger:
false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD
#参考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分页
per_page:
10
#每页文章数,设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论,替换为多说
disqus_shortname:
# Extensions #拓展插件
theme: landscape-plus
#主题
exclude_generator:
plugins:
#插件,例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署,将 lmintlcx 改成用户名
deploy:
type: github
repo: https:
//github.com/lmintlcx/lmintlcx.github.io.git
命令行使用
常用命令:
hexo help
#查看帮助
hexo init
#初始化一个目录
hexo
new
"postName"
#新建文章
hexo
new page
"pageName"
#新建页面
hexo generate
#生成网页,可以在 public 目录查看整个网站的文件
hexo
server
#本地预览,'Ctrl+C'关闭
hexo deploy
#部署.deploy目录
hexo clean
#清除缓存,**强烈建议每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹**
复合命令:
hexo deploy -g
hexo
server -g
简写:
hexo
n == hexo new
hexo
g == hexo generate
hexo
s == hexo server
hexo
d == hexo deploy
安装插件,
<plugin-name>
为插件名
npm install <plugin-name> --save
npm update #升级
npm uninstall <plugin-name>
#卸载
安装主题,
<repository>
为主题的 git 仓库,
<theme-name>
为要存放在本地的目录名
git clone <repository> themes/<theme-name>
编辑文章
新建文章
hexo
new
"标题"
在 _posts 目录下会生成文件
标题.md
title: 标题
date: 2014-11-11 11:11:11
tags:
-
标签1
-
标签2
-
标签3
categories: [分类1,分类2,分类3]
-
--
正文,使用Markdown语法书写
编辑完后保存,hexo server 预览
发布
以发布到 Github 为例
编辑全局配置文件 _config.yml 中的 deploy 部分,
lmintlcx
为用户名
deploy:
type: github
repo: https:
//github.com/lmintlcx/lmintlcx.github.io.git
branch: master
或者
deploy:
type: github
repository: [email protected]
github.com:lmintlcx/
lmintlcx.github.com.git
branch: master
项目主页需要把 branch 设置为 gh-pages
托管到 Gitcafe 的话修改为
deploy:
type: github
repository: [email protected]
gitcafe.com:lmintlcx/
lmintlcx.git
branch: gitcafe-pages
部署
hexo deploy
以下提示说明部署成功
[info] Deploy
done: github
点击 Github 上项目的 Settings,GitHub Pages,提示
Your site is published at http://lmintlcx.github.io/
第一次上传网站的话需要等十分钟左右,以后每次更新都能马上打开
绑定域名
不绑定域名的话只能通过
your_user_name.github.io
访问
申请域名推荐GoDaddy,域名解析推荐DNSPod
绑定顶级域名
新建文件 CNAME,无后缀,纯文本文件,内容为要绑定的域名
lmintlcx.com
如果要使用
www.lmintlcx.com
的形式,文件内容改为
www.lmintlcx.com
DNS设置
主机记录
@
,类型
A
,记录值
192.30.252.153
主机记录
www
,类型
A
,记录值
192.30.252.153
参考 https://help.github.com/articles/tips-for-configuring-an-a-record-with-your-dns-provider
绑定子域名
比如使用域名
lmintlcx.com
的子域名
blog.lmintlcx.com
CNAME文件内容为
blog.lmintlcx.com
DNS设置
主机记录
blog
,类型
CNAME
,记录值
lmintlcx.github.io
参考 https://help.github.com/articles/tips-for-configuring-a-cname-record-with-your-dns-provider
Gitcafe 绑定域名
项目管理界面,左侧的导航栏中有自定义域名设置
优化
配置主题
Hexo 的 主题列表
下载主题
$ git clone <repository> themes/<theme-name>
也可以手动下载后解压到 themes 目录
在全局配置文件 _config.yml 中 theme 一行改成想要的主题
主题目录结构
.
├── languages
#国际化
| ├──
default.yml
#默认
| └── zh-CN.yml
#中文
├──
layout
#布局
| ├── _partial
#局部的布局
| └── _widget
#小挂件的布局
├── script
#js脚本
├── source
#源代码文件
| ├── css
#CSS
| | ├── _base
#基础CSS
| | ├── _partial
#局部CSS
| | ├── fonts
#字体
| | ├── images
#图片
| | └── style.styl
#style.css
| ├── fancybox
#fancybox
| └── js
#js
├── _config.yml
#主题配置文件
└── README.md
#主题介绍
以下是主题 landscape-plus 的配置文件
# Header #顶部导航
menu:
Home: /
#主页
Archives: /archives
#存档
About: /about
#关于
rss: /atom.xml
#RSS 订阅
# Content
excerpt_link: 阅读全文
#“Read More”要显示的文字
fancybox: true
#fancybox 看图效果
# Sidebar #侧边栏
sidebar: right
#位置,右边
widgets:
- weibo
- recent_posts
- recent_comments
- recent_visitors
- archive
- category
- tag
- tagcloud
#- links #在 widget 前加"#"禁用
# Links #友情链接
links:
Hexo: http://hexo.io
# Miscellaneous
google_analytics: UA-xxxxxxxx-
1
#Google Analytics ID
favicon: /favicon.ico
#favicon 路径
twitter: lmintlcx
google_plus:
fb_admins:
fb_app_id:
# Duoshuo #多说通用代码
duoshuo_shortname:
# Baidu share #百度分享
baidushare: true
评论
在 Disqus官网 申请新网站的 shortname
配置 _config.yml 文件
disqus_shortname:
xxxxxxxx
替换为多说,landscape-plus 已经配置好了多说,填写
duoshuo_shortname
即可
RSS 订阅
安装插件
npm
install hexo-generator-feed
全局配置文件开启插件
plugin
s:
- hexo-generator-feed
主题配置文件添加入口
rss:
/atom.xml
浏览
http://localhost:4000/atom.xml
查看是否生效
Sitemap 网站地图
安装插件
npm
install hexo-generator-sitemap
开启插件
plugin
s:
- hexo-generator-sitemap
浏览
http://localhost:4000/sitemap.xml
查看是否生效
mathjax 数学公式
新建文件 themes/pacman/layout/_partial/mathjax.ejs
添加以下内容
<!-- mathjax config similar to math.stackexchange -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ [
'$',
'$'], [
"\\(",
"\\)"] ],
processEscapes:
true
}
});
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
skipTags: [
'script',
'noscript',
'style',
'textarea',
'pre',
'code']
}
});
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(
function() {
var all = MathJax.Hub.getAllJax(), i;
for(i=
0; i < all.length; i +=
1) {
all[i].SourceElement().parentNode.className +=
' has-jax';
}
});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
在themes/pacman/layout/_partial/after_footer.ejs增加对mathjax的引用
<
%- partial(
'mathjax')
%>
文章摘要
在摘要文字后面插入
<!--more-->
可以在主题的配置文件中设置要显示的文字
excerpt_link:
阅读全文
图片显示
把图片放到 source/images 目录下
![](images/xxx.jpg)
推荐使用图床
自定义页面
以关于页面为例
hexo
new page
"about"
编辑 source/about/index.md:
title: About
date: 2014-11-1 11:11:11
---
About Me
在主题的配置文件里添加入口
menu:
About: /
about
自定义 404 页面
添加 source/404.html
404 页面不需要 Hexo 解析
layout: false
--------
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>404
</title>
<link rel="icon" href="/favicon.ico">
</head>
<body>
<div align="center">
<p>404 你懂的
</p>
</div>
</body>
</html>
添加小图标
将 favicon.ico 文件放在 source 目录下
配置 landscape-plus 主题里的 _config.yml
favicon:
/favicon.ico
添加robots.txt
source 目录下添加 robots.txt
User-agent:
Baiduspider
Disallow:
User-agent:
Googlebot
Disallow:
User-agent:
*
Disallow:
/
生成 post 时默认生成 categories 配置项
在 scaffolds/post.md 中添加
categorie
s:
添加新浪微博秀
在微博秀设置和生成代码
在主题 /layout/_widget 中新建 weibo.ejs 文件,保存刚刚复制的代码
在主题配置文件添加
widget
s:
- weibo
设置网站统计
百度统计
在 head.ejs 添加
<script type="text/javascript">
#百度统计代码
</script>
Google Analytics
landscape-plus 主题直接配置
google_analytics:
UA-xxxxxxxx-1
添加“fork me on github”
官方教程
将代码插入到 layout.ejs
分享
landscape-plus 主题开启百度分享
baidushare:
true
迁移
参考官方文档 Hexo Migration
- EOF -
本文作者:lmintlcx
原文链接:http://blog.lmintlcx.com/post/blog-with-hexo.html
分享到 评论