惊尘小雨

blog space

0%

创建个人博客

发表于 更新于 分类于 ， Valine：

个人博客的创建过程源自于一次偶然的兴趣，仅仅是想找个地儿让自己有个诉说的对象。不至于整天埋头工作，让自己丧失了一些激情，太过无聊。

这里简要记录一下自己当时部署这样一个博客的主要命令及过程。

Hexo + GitHub Page

依赖项 Node.js 、Git

安装Hexo

1
npm install hexo-cli -g

创建项目

1
2
3
4
5
6
7
8
# 创建并初始化项目
$ hexo init jcxyblog

# 切换到项目
$ cd jcxyblog

# 安装依赖
$ npm install

本地预览

生成静态网站，并在本地预览。

1
2
3
4
5
6
7
8
9
10
11
12
# 生成静态文件
# 将网站资源放在public目录下，相当于执行了hexo generate
$ hexo g

# 查看目录结构
# ubuntu
$ tree -L 1
# windows tree默认仅显示文件夹，不显示文件；/f显示所有文件夹及文件
> tree /f

# 启动服务，本地预览，相当于执行了hexo server
$ hexo s
内容 说明
db.json
node_modules
package-lock.json
package.json 应用程序信息
public 静态站点存放在这
scaffolds 模板文件夹，新建文章时使用此文件夹下的文件作为模板
source 存放用户资源的地方
themes 主题
_config.landscape.yml
_config.yml 网站配置文件

新建文章

  1. 新建一篇名为test的文章

    1
    $ hexo new test

    新建文章默认会放到source/_posts/目录下，文件扩展名为.md，新建时只需指定文件名即可。

  2. 查看并编辑test.md后保存

    1
    2
    $ vim source/_posts/test.md
    > notepad source/_posts/test.md

  3. 本地查看

    1
    2
    3
    4
    # 生成静态文件
    $ hexo g
    # 启动服务
    $ hexo s

GitHub Pages

创建GitHub Pages

  1. 在GitHub上创建一个仓库（Repository）

    打开 https://github.com/new，在`Repository name输入username.github.io（其中username**必须**是自己的GitHub用户名），然后点击Create repository`创建一个新仓库。

  2. 把Hexo生成的静态网站推送到GitHub上。

    1. 安装 hexo-deployer-git.
    1
    $ npm install hexo-deployer-git --save
    1. 编辑**_config.yml** （示例如下）:
    1
    2
    3
    4
    5
    deploy:
      type: git
      repo: <repository url> # https://github.com/YaoHuanyu/YaoHuanyu.github.io.git
      branch: [branch] # master
      message: [message]
    Option Description Default
    repo 目标仓库的URL
    branch Branch name. gh-pages (GitHub) coding-pages (Coding.net) master (others)
    message 自定义提交消息。 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}
    token 用于向repo进行身份验证的可选token值。用$前缀从环境变量中获取token。

    1. 部署网站 hexo clean && hexo deploy.

      1
      2
      # 执行部署命令
      $ hexo d
      • 除非使用令牌或ssh密钥进行身份验证，否则将提示您输入目标存储库的用户名和密码。
      • hexo-deployer-git不存储您的用户名和密码。使用git-credential-cache暂时保存。

    2. 导航到repository settings并将”Pages”分支更改为gh-pages（或在配置中指定的分支）。部署的站点应该位于”Pages”设置中显示的链接上。

    Hexo生成的静态网站就被推送到GitHub新建的仓库中。https://yaohuanyu.github.io可查看效果。

绑定自己的域名

添加域名解析

GitHub设置或自己生成CNAME

GitHub -> Repository -> Settings -> GitHub Pages -> Custom domain

或者切换到source目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$ cd source

# 新建CNAME文件
$ touch CNAME

# 编辑CNAME，添加域名，如blog.jcxy.ml
$ cat CNAME
blog.jcxy.ml

# 返回项目根目录
$ cd ..

# 生成网站
$ hexo g

# 部署到GitHub
$ hexo d

域名解析页添加记录

类型 名称 内容 TTL
CNAME blog yaohuanyu.github.io 自动

使用NexT主题

1
2
3
4
5
6
7
8
9
10
11
12
$ cd jcxyblog
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

# 打开 _config.yml，配置theme:next

# 本地预览
# 生成静态网站
$ hexo g --debug
# 开启debug模式
$ hexo s --debug

# 预览若无问题，使用hexo d直接部署到GitHub即可。

更新主题

更新主题命令如下。

1
2
$ cd themes/next
$ git pull

主题配置

详细应用参考配置文档

新建页面

  1. 新增导航栏页面

    在主题配置文件themes/next/_config.yml中搜索menu，在menu中配置对应的导航栏选项，示例如下。

    1
    2
    3
    4
    5
    6
    menu:
      home: / || fa fa-home
      categories: /categories/ || fa fa-th
      tags: /tags/ || fa fa-tags
      archives: /archives/ || fa fa-archive
      about: /about/ || fa fa-user

    与英文对应中文在themes/next/languages/zh-CN.yml中进行匹配。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    menu:
      home: 首页
      archives: 归档
      categories: 分类
      tags: 标签
      about: 关于
      search: 搜索
      schedule: 日程表
      sitemap: 站点地图
      commonweal: 公益 404

  2. 新建页面

    默认情况下，导航栏上的标签（tags）、关于（about）、分类（categories)等页面是没有的。需要在项目根目录下执行以下命令。否则会Cannot GET /categories/ Cannot GET /tags/。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    # 创建【分类】页面
    $ hexo new page categories
    INFO  Validating config
    INFO  Created: ...\jcxyblog\source\categories\index.md

    # 创建【标签】页面
    $ hexo new page tags
    INFO  Validating config
    INFO  Created: ...\jcxyblog\source\tags\index.md

    # 创建【关于】页面
    $ hexo new page about
    INFO  Validating config
    INFO  Created: ...\jcxyblog\source\about\index.md

  3. 禁用评论

    若使用评论，则默认所有页面都会开启评论模块，有些页面不需要评论，将comments设为false即可禁用，示例如下。

    1
    2
    3
    title: 页面名字
    date: 2021-04-06 23:08:47
    comments: false

  4. 指定页面类型

    type字段用来指定页面类型，示例如下。

    1
    2
    3
    4
    title: tags
    date: 2021-04-06 19:10:02
    # 增加type属性
    type: "tags"

hexo 搜索功能

安装插件

1
npm install hexo-generator-searchdb --save

修改站点配置文件

1
2
3
4
5
6
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改 主题配置文件

1
2
3
local_search:
  enable: true

开始写作

创建文章并熟悉布局

  1. 新建一篇文章

    新建文章命令如下。

    1
    $ hexo new [布局] <文章标题>

    例如，新建一篇文章”我的博客“，示例如下。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $ hexo new 我的博客
    INFO  Validating config
    INFO  Created: \jcxyblog\source\_posts\我的博客.md

    $ cat source/_posts/我的博客.md
    ---
    title: 我的博客
    date: 2021-04-06 23:22:24
    tags:
    ---

    默认文章文件名不带有创建日期，想在文件名之前带上创建日期，可做如下设置。

    打开网站配置文件，搜索newpostname，将其设为new_post_name: :year-:month-:day-:tiltle.md

    再次新建时，则变成如下格式。

    1
    2
    3
    $ hexo new 测试文档
    INFO  Validating config
    INFO  Created: jcxyblog\source\_posts\2021-04-06-测试文档.md

    Hexo支持三种布局，可将其理解为不同类型的Markdown文件，具体如下。

    布局 说明 存放路径
    文章 用于发布的文章 source/_posts
    页面 导航栏上的项目 source
    草稿 还未完成的草稿 source/_drafts

  2. 新建草稿

    新建草稿命令如下。

    1
    2
    3
    4
    5
    6
    7
    8
    $ hexo new draft 草稿文档
    INFO  Validating config
    INFO  Created: d:\WorkSpace\Sty_C\jcxyblog\source\_drafts\草稿文档.md
    $ cat source\_drafts\草稿文档.md
    ---
    title: 草稿文档
    tags:
    ---

    草稿没有创建日期。

    草稿正式发布，使用publish，命令如下。

    1
    $ hexo publish _drafts 草稿文档

评论设置

开启评论

  1. 然后前往leancloud注册账号，随意注册一个应用

  2. 打开设置应用Keys，获取appid和appkey。

  3. next文件夹的_config.yml文件，找到valine字段

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    # Valine
    # For more information: https://valine.js.org, https://github.com/xCss/Valine
    valine:
      enable: true
      appid: # 填入自己的leancloud应用appid
      appkey: # 填入自己的leancloud应用appkey
      notify: false # Mail notifier
      verify: false # Verification code
      placeholder: Just go go # Comment box placeholder
      avatar: mm # Gravatar style
      guest_info: nick,mail,link # Custom comment header
      pageSize: 10 # Pagination size
      language:  # Language, available values: en, zh-cn
      visitor: false # Article reading statistic
      comment_count: true # If false, comment count will only be displayed in post page, not in home page
      recordIP: false # Whether to record the commenter IP
      serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
      #post_meta_order: 0

  4. 以上。