Hexo加Yilia搭建博客

1.搭建博客

1.1.本地安装Hexo

下载安装Git与Node.js略过

1.安装hexo

1
npm install hexo -g #-g表示全局安装, npm默认为当前项目安装

2.Hexo基本命令:

1
2
3
4
5
6
7
8
9
10
11
12
npm update hexo -g  #升级 
hexo init <folder>  #执行init命令初始化hexo到你指定的目录
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo generate       #自动根据当前目录下文件,生成静态网页 hexo g
hexo server         #运行本地服务 hexo s
hexo clean          #清理
hexo deploy         #部署 hexo d

hexo server         #Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s      #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP

最常用的是：

1
2
3
4
hexo clean
hexo g
hexo d
hexo s

这个时候hexo s之后就可以在浏览器

1
http://localhost:4000/

这里看到hexo博客的基本样子了

1.2.将网站推送至Github

1.首先在本地告诉退给谁
打开本地博客本目录下的配置文件_config.yml
修改最后一行的配置：

1
2
3
4
deploy:
  type: git
  repository: https://github.com/cuiqingwei/cuiqingwei.github.io.git
  branch: master

2.上传github

1
2
3
hexo clean
hexo g
hexo d

若执行hexo g出错则执行

1
npm install hexo --save

若执行hexo d出错则执行

1
npm install hexo-deployer-git --save

错误修正后再次执行hexo g和hexo d上传到服务器。
若未关联GitHub，执行hexo d时会提示输入GitHub账号用户名和密码，即:

1
2
username for 'https://github.com':
password for 'https://github.com':

输入你的github账号密码即可。
hexo d执行成功后便可通过https://cuiqingwei.github.io访问博客

3.记住github密码
在github添加ssh key后不需要每次更新博客再输入用户名和密码。首先检查本地是否包含ssh keys。如果存在则直接将ssh key添加到GitHub之中，否则新生成ssh key。

执行下述命令生成新的ssh key

1
ssh-keygen -t rsa -C "your_email@exampl"

这里需要将

1
your_email@example.com

改成自己注册的GitHub邮箱地址。默认会在~/.ssh/id_rsa.pub中生成id_rsa和id_rsa.pub文件。

Mac下利用open ~/.ssh打开文件夹，打开id_rsa.pub文件，里面的信息即为ssh key，将此信息复制到GitHub的Add ssh key路径GitHub->Setting->SSH keys->add SSH key中即可。Title里填写任意标题，将复制的内容粘贴到key中，点击Add key完成添加即可记住密码。

此时本地博客内容便已关联到GitHub之中，本地博客改变之后，通过hexo g和hexo d便可更新到GitHub之中。

1.3.Github绑定域名

如果你有自己的域名了，比如买了“xxx.com”
那么可以把博客与域名关联起来，这样你打开xxx.com显示的就是xxx.github.io的内容。你打开xxx.github.io会自动跳转xxx.com

这里演示的是在阿里云万网的域名绑定，在国内主流的域名代理厂商也就阿里云和腾讯云。登录到阿里云，进入管理控制台的域名列表，找到你的个性化域名，进入解析，添加记录类型CNAME记录值xxx.github.io

然后再你本地博客文件夹下的source文件夹里添加一个文件，文件名为”CNAME”，内容为你的域名。
例如：xxx.com 这里要求一个字符不差。

1.4.更改主题（以Yilia为例）

hexo-theme-yilia 是为 hexo 2.4+制作的主题。
响应式设计，风格简约。

  1. 安装yilia

    1
    git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

  2. 配置
    修改hexo根目录下的 _config.yml ： theme: yilia

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    # Header
    menu:
      主页: /
      所有文章: /archives
      # 随笔: /tags/随笔

    # SubNav
    subnav:
      github: "https://github.com/litten"
      weibo: "http://weibo.com/litten225"
      rss: "http://feed.feedsky.com/litten"
      # facebook: "/"
      # google: "/"
      # twitter: "/"
      # linkedin: "/"

    rss: /atom.xml

    # Content
    excerpt_link: more
    fancybox: true

    # Miscellaneous

    favicon: /favicon.png

    avatar: "https://avatars2.githubusercontent.com/u/2024949?v=2&s=150"
    share: true
    duoshuo: true

  3. 更新

    1
    2
    cd themes/yilia
    git pull

    2.编写博客

2.1.Hexo文章的开头

举例：

1
2
3
4
5
6
7
8
9
10
11
12
title: 从零搭建博客 教程 Hexo GitHub    #文章标题
subtitle:                            #子标题
#categories: 文章                     #文章分類目錄 可以省略    
toc: true                            #目录 需要安装插件或者主题自带
reward: true                         #打赏 需要安装插件或者主题自带
declare: true                        #版权 需要安装插件或者主题自带
date:                                #文章日期 2019/7/1
header-img:                          #顶部背景图片
tags:                                #标签
- 自学
- Blog
- Original

2.2.Hexo文章的内容

2.2.1markdown常用语法

2.2.1.1 标题

建立一个1级标题：

1
# 建立一个1级标题：

建立一个2级标题：

1
## 建立一个2级标题

建立一个3级标题：

1
### 建立一个3级标题

最多五级标题

2.2.1.2建立一个超链接

效果:More info: Writing
代码如下：

1
2
3
4
5
6
More info: [Writing](https://hexo.io/docs/writing.html)

新窗口打开链接：
<a target = "_blank" href="#">AAA</a>
#：表示要跳转的连接
点击 AAA 超链接，将在新窗口打开#连接

2.2.1.3建立目录

大部分Hexo主题不支持markdown建立目录，不过这里还是教一下。
代码如下：

1
[TOC]

2.2.1.4建立标签

代码如下：

1
2
3
4
5
6
7
8
tags: 自学记录 (写在头上）

若多个标签，则：
tags:
- first
- essay
- picture
效果看题头

2.2.1.5代码块

代码如下：

1
2
先写三个“`”带一个空格，后面写语言类型例如C++
再写三个“`”

注意！

1
写markdown的时候，用txt打开，一定要用UTF-8保存。否则中文乱码。

2.2.1.6图片

代码如下：

1
2
3
4
![1](/img/2016-09-15.jpg)
或者
<img src="https://http://cuiqingwei.github.io/img/avatar.png" width = 100% div align=center/>
下面这个可以调整大小。

2.2.1.7音乐

（具体功能百度htmlaudio标签）

1
2
3
<audio id="audio" autoplay="autoplay">
    <source src="http://qzone.haoduoge.com/music1/2015-04-23/1429774382.mp3" type="audio/mp3"></source>
</audio>

2.2.1.8怎么改字体加颜色

摘要：
加粗

斜体

下划线

删除线

删除线2
DEMO1: 上标
DEMO2: 下标

居中
标记

1
2
3
4
5
6
7
8
9
10
11
<font color="red" face="宋体" size= 3>摘要：</font>
<b> 加粗 </b>
<I>斜体</I> 
<U>下划线</U> 
<S>删除线</S> 
<STRIKE>删除线2</STRIKE> 
DEMO1: <SUP>上标</SUP> 
DEMO2: <SUB>下标</SUB>
<!-- 注释 -->
<center>居中</center>
<mark>标记</mark>

2.2.1.9怎么加空格和回车

1
2
空格&nbsp;&nbsp;&nbsp;&nbsp;
回车<br/> <br/>

2.2.1.10折叠

标题
1
2
3
4
5
6
7
<details>
  <summary><font color=darkred>标题</font></summary>
  被折叠内容
</details>

<details><summary><font color=darkred>标题</font></summary>
  被折叠内容</details>

2.2.1.11页面内跳转

页面内跳转由两部分组成：
跳转标识（mark）：在你想跳转到的地方放一个标识，后面就会跳到这里来。

1
<div id="Mark"></div>

跳转命令：点击就会跳转到对应的标识

1
[返回目录](#Mark)

2.2.1.12 文章省略

这里是为了不再博客主页面把每一个文章全部显示出来
在文章中间插入：

1
<!--more-->

其就会显示到标识前面的部分。

2.3 图床

图床就是网上可以在线储存图片的服务器。因为markdown里面无法存储图片，所以我们要把图片放在图床里，再以链接的形式引用。

什么是好的图床：（重要程度一次递减）
1.平台稳定（别动不动就崩 别用几天平台没了 ）
2.图片存储时间长（保证你的博客需求）
3.支持所需的图片要求（大小 格式要求）
4.加载速度
5.总容量
6.廉价最好免费

根据上面的几个指标利用知乎，百度去搜索吧~

参考链接

GitHub+Hexo 搭建个人网站详细教程
超详细Hexo+Github博客搭建小白教程
Mac+Hexo+GitHub搭建博客教程

本文标题:Hexo加Yilia搭建博客

文章作者:

发布时间:2016-09-15, 16:03:00

最后更新:2019-12-19, 21:57:54

原始链接:http://cuiqingwei.github.io/2016/09/15/2016-09-15-Hexo%E4%B8%BB%E9%A2%98Yilia/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 1.搭建博客
    1. 1.1. 1.1.本地安装Hexo
    2. 1.2. 1.2.将网站推送至Github
    3. 1.3. 1.3.Github绑定域名
    4. 1.4. 1.4.更改主题（以Yilia为例）
  2. 2. 2.编写博客
    1. 2.1. 2.1.Hexo文章的开头
    2. 2.2. 2.2.Hexo文章的内容
      1. 2.2.1. 2.2.1markdown常用语法
        1. 2.2.1.1. 2.2.1.1 标题
        2. 2.2.1.2. 2.2.1.2建立一个超链接
        3. 2.2.1.3. 2.2.1.3建立目录
        4. 2.2.1.4. 2.2.1.4建立标签
        5. 2.2.1.5. 2.2.1.5代码块
        6. 2.2.1.6. 2.2.1.6图片
        7. 2.2.1.7. 2.2.1.7音乐
        8. 2.2.1.8. 2.2.1.8怎么改字体加颜色
        9. 2.2.1.9. 2.2.1.9怎么加空格和回车
        10. 2.2.1.10. 2.2.1.10折叠
        11. 2.2.1.11. 2.2.1.11页面内跳转
        12. 2.2.1.12. 2.2.1.12 文章省略
    3. 2.3. 2.3 图床
  3. 3. 参考链接