hexo 博客建立

Posted on | In

背景

  • 本地已安装git, node(v10.15.3), npm(v6.4.1)

  • 远程github上已建立username.github.io的仓库，并开启静态页面

  • SSH已配置

参考博客

使用hexo+github搭建免费个人博客详细教程 - 我是小茗同学 - 博客园

安装

  1. 安装hexo

    npm install -g hexo 也可以 npm install -g hexo-cli

    第二种方式据说是hexo的命令行模式？将一些相关要用的功能进行了封装。然而其实没有感到差异，使用时的命令语句是一样的。

  2. 初始化

    在博客文件夹目录下： npm init

    注：生成的文件中出现 package-lock.json ，推测是有些依赖包版本不合适导致，但暂时没有出现影响使用。

    此时，通过以下命令本地查看博客是否安装完成：

    1
    2
    3
    hexo g  // 生成静态页面
    hexo s  // 开启本地服务，默认4000
    hexo s -p 数字  // 若默认4000端口占用，更换端口开启服务

  3. 更换主题

    根据主题的 README.md 提示下载，下载后修改 _config.yml 中的 theme: landscape 为对应主题，再 hexo g 重新生成。

    注1：本博客主题为：polarbear

    注2：如果在 hexo g 中出现问题，可以先 hexo clean 清理历史生成再重新生成

  4. git上传

    1. 安装插件 npm install hexo-deployer-git --save

    2. 配置 _config.yml 中的 deploy：

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

    3. 提交代码 hexo d

  5. tips

    如果 npm 失败，可以尝试 cnpm 安装

使用

  1. 新建文稿

    方式1：通过 hexo new "文稿标题" 新建

    方式2：直接在 ../source/_posts 文件夹里新建，文件类型为 .md (markdown文件)

  2. 编辑文稿头

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ---
    title: 文稿标题
    date: 2017-01-01 20:51:31  //文稿建立时间, hexo new 会自动生成
    categories:
    	- 文稿分类
    tags: 
    	- 文稿关键字标签
    toc: true                  // 开启文稿目录
    description:
    // 显示在博文列表的简短介绍 (不出现在正文)
    // 也可以在正文某处用 <!--more--> 隔开下文，那么 <!--more--> 以上会作为介绍出现 (正文出现)
    ---

  3. 查看文稿效果

    1
    2
    hexo g  // 生成静态页面，generate 简写
    hexo s  // 开启本地服务器，server 简写

访问 http://localhost:4000/ 查看博客

每次修改保存后，直接刷新页面，即可看到更新