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

最新推荐文章于 2023-01-05 14:12:38 发布

tham_

最新推荐文章于 2023-01-05 14:12:38 发布

阅读量4.2k

点赞数

分类专栏： Computer Skill Web develop 文章标签： hexo hexo博客 Gitcafe博客 Gitcafe 搭建博客简明教程

Web develop 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Computer Skill

9 篇文章 0 订阅

订阅专栏

博客建站简明攻略

简介

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-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: 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/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: 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/
第一次上传网站的话需要等十分钟左右，以后每次更新都能马上打开

绑定域名

不绑定域名的话只能通过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

tham_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录