天天看点

博客建站简明攻略+使用Hexo搭建博客经验总结 博客建站简明攻略 简介 F.A.Q. s 参考 Hexo搭建博客经验总结 安装 使用 优化

博客建站简明攻略

简介

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

分享到 评论

继续阅读