您的位置：首页 > 其它

博客建站简明攻略+使用Hexo搭建博客经验总结

2015-04-15 17:04 441 查看

博客建站简明攻略

简介

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 hexo-renderer-ejs@0.1.0 hexo-renderer-marked@0.1.0 hexo-renderer-stylus@0.1.0 hexo-generator-feed@0.2.1 hexo-generator-sitemap@0.2.0

参考

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-lcxhexo 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: l.mint.lcx@gmail.com #电子邮箱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/codepermalink_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: 0render_drafts: falsepost_asset_folder: falserelative_link: falsehighlight: #语法高亮  enable: true #是否启用  line_number: true #显示行号  tab_replace:# Category & Tag #分类和标签default_category: uncategorized #默认分类category_map:tag_map:# Archives2: 开启分页1: 禁用分页0: 全部禁用archive: 2category: 2tag: 2# Server #本地服务器port: 4000 #端口号server_ip: localhost #IP 地址logger: falselogger_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[/code] 
命令行使用
常用命令：
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 -ghexo server -g


简写：
hexo n == hexo newhexo g == hexo generatehexo s == hexo serverhexo d == hexo deploy


安装插件，<plugin-name>
为插件名
npm install <plugin-name> --savenpm 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:11tags:- 标签1- 标签2- 标签3categories: [分类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: git@github.com:lmintlcx/lmintlcx.github.com.git  branch: master


项目主页需要把 branch 设置为 gh-pages

托管到 Gitcafe 的话修改为
deploy:  type: github  repository: git@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/[/code] 
第一次上传网站的话需要等十分钟左右，以后每次更新都能马上打开

绑定域名
不绑定域名的话只能通过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 订阅# Contentexcerpt_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# Miscellaneousgoogle_analytics: UA-xxxxxxxx-1 #Google Analytics IDfavicon: /favicon.ico #favicon 路径twitter: lmintlcxgoogle_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


全局配置文件开启插件
plugins:- hexo-generator-feed


主题配置文件添加入口
rss: /atom.xml


浏览http://localhost:4000/atom.xml
查看是否生效

Sitemap 网站地图
安装插件
npm install hexo-generator-sitemap


开启插件
plugins:- 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: Aboutdate: 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: BaiduspiderDisallow: User-agent: GooglebotDisallow: User-agent: *Disallow: /


生成 post 时默认生成 categories 配置项
在 scaffolds/post.md 中添加
categories:


添加新浪微博秀
在微博秀设置和生成代码

在主题 /layout/_widget 中新建 weibo.ejs 文件，保存刚刚复制的代码

在主题配置文件添加
widgets:- 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

分享到评论

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航