鳴轉のブログ

专业CS，喜欢读书，在学日语。

简单搭个Blog

发表于 更新于 分类于

本文主要作用是记录下基于hexo搭建博客的过程和一些常用命令，后续的优化也会记录在内。

Hexo博客搭建

安装node.js

之前安装过，略过。

安装淘宝的cnpm管理器，安装成功之后输入cnpm -v查看cnpm版本。

安装hexo

输入cnpm install -g hexo-cli安装hexo框架。
输入hexo -v查看hexo版本。

创建博客文件夹

在合适的路径创建博客文件夹，在这里文件夹名称以Blog为例，可以手动创建也可以输入命令mkdir Blog创建。
创建好之后通过命令cd进入Blog目录，或在Blog目录下打开cmd。
输入hexo init生成并初始化博客。
输入hexo s启动本地博客服务，Ctrl并点击地址 http://localhost:4000/ 可以访问本地博客。

创建博客文章

输入hexo n "articleName"创建新的文章，在 Blog/resource/_post 路径下生成 articleName. md 文件，可以用vscode等工具进行编辑，参考Markdown基本语法)。
编辑完成后，在Blog路径下输入hexo clean清理。
输入hexo g生成。
输入hexo s再次启动查看，可以看到新建的md文件已被上传。
即每次修改之后可以通过以下命令进行本地效果查看：

1
2
3
hexo clean
hexo g
hexo s

至此，本地hexo博客搭建完成，下面将其部署到Github仓库中。

部署Github

GitHub创建个人仓库

仓库名应该为：用户名.http://github.io 这个用户名用GitHub帐号名称代替

关联Github与Hexo

配置Blog文件夹下的_config.yml文件，将末尾修改为如下内容。

1
2
3
4
deploy:
  type: git
  repo: 'https://github.com/uni-zhuan/uni-zhuan.github.io.git'
  branch: master

部署到Github主页

在Blog文件夹下输入hexo d将本地博客部署到Github仓库里。

更新Github Pages。

更新之后即可通过网站地址 https://uni-zhuan.github.io 进行访问。

即每次修改之后可以通过以下步骤进行部署：

1
2
3
4
hexo clean
hexo g   
hexo d

主题优化

安装主题

安装主题和渲染器：

1
2
3
git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant  
npm install hexo-renderer-pug --save  
npm install hexo-renderer-sass --save

编辑Hexo目录下的 _config.yml，将theme的值改为maupassant。

注：hexo-renderer-sass 插件依赖已经过期导致 npm install 失败，解决方法为修改 package.json 配置，并重新进行npm i操作

1
"hexo-renderer-sass": "github:cocowool/hexo-renderer-sass",

优化主题

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 站点配置文件位于站点根目录下Blog/_config.yml，主要包含 Hexo 本身的配置；主题配置文件位于主题目录下Blog/themes/主题名称/_config.yml，这份配置由主题作者提供，主要用于配置主题相关的选项。

站点配置

修改Site中author及language部分，其他的看着改。

1
2
3
4
5
6
7
title: 鳴轉のブログ
subtitle: '啭る鸟は羽ばたかない'
description: '学计算机，在读书。'
keywords:
author: 鳴轉
language: zh-CN
timezone: ''

主题配置

导航菜单

主要修改menu、info、links等信息，若需要增添部分功能按键，参照大道至简博客。

导航菜单中集成了FontAwesome图标字体，可以在这里选择新的图标，并按照相关说明使用。

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
# menu 导航菜单，可添加更换icon
menu:
  - page: home
    directory: .
    icon: fa-home
  - page: archive
    directory: archives/
    icon: fa-archive
  - page: tags
    directory: tags/
    icon: fa-tags
  - page: categories
    directory: categories/
    icon: fa-folder-open
  - page: albums
    directory: albums/
    icon:  fa-camera
  - page: about
    directory: about/
    icon: fa-user

widgets: 
  - search
  - info
  - category
  - tag
  - recent_posts
  - recent_comments
  - links

# Site
info:
  avatar: /img/avatar.png
  discription: 啭る鸟は羽ばたかない
  outlinkitem:
    - name: twitter
      outlink: https://twitter.com/uni_zhuan
      message: Twitter
    - name: envelope
      outlink: mailto:wangjw@shu.edu.cn
      message: Email
    - name: github
      outlink: https://github.com/uni-zhuan
      message: Github

启用目录

主题配置文件中将toc属性值改为true。

1
toc: true # 是否开启文章章节目录导航

之后在发布文章时，每篇文章（*.md文件）的开头部分添加以下代码即可。

1
2
3
4
5
6
7
8
9
10
---
title: Title
date: YYYY-MM-DD hh:mm:ss
tags:        # 标签 
- tag1
- tag2
categories:  # 分类
- categoriy
toc: true or false    # 是否启用目录索引
---

CSS修改

在浏览器中打开主页并右击->检查，通过这种方式定位某部分样式在css文件代码中的位置，可以先在浏览器中修改预览效果，后在themes/theme name/source/css/style.css文件中进行修改。

搭建图床

写博客不可避免地需要一个稳定的图床，用于存放图片。由于github需要科学上网，在其他设备显示可能存在问题，gitee由于开源需要审核，用作图床会导致无法开源，且上传图片有2MB的大小限制，所以最终选择了阿里云OSS搭配PicGo进行搭建。

阿里云OSS

购买阿里云OSS

在阿里云对象存储OSS页面点击折扣套餐，选择所需服务。

创建Bucket

在产品与服务中找到对象存储OSS服务，点击创建Bucket，读写权限选择公共读。

创建AccessKey

在管理AccessKey中点击创建AccessKey，即可获得AccessKey ID和AccessKey Secret，注意保存。

PicGo

在PicGo进行下载安装。

在图床设置中选择阿里云OSS，填写相应信息，确定并设置为默认。

配置完之后就可以使用了，在上传区可以通过拖拽或点击上传图片，上传后自动复制url至剪贴板，在相册中可以对图片进行操作。

其他改进部分

目录改进

原先的目录在正文上方显示，当有长代码段情况时排版杂乱，并且每次需要目录时都需要回到顶部的操作对长文章并不友好，故尝试对目录移至侧栏并固定。

布局更改

样式更改

添加js文件

  • 相册怎么搞
  • 友链 md