Hexo博客搭建过程

Posted on | In | 阅读数

环境准备

1.Git下载安装

2.Node.JS下载安装

安装完成后，要确认是否已经安装成功，在cmd中使用下列命令来验证，有返回的信息就表示安装成功了

git –version

node -v

npm -v

安装Hexo

在git bash中输入 npm install -g hexo-cli

因为npm默认是从国外的源获取和下载包信息，所以这个命令有时候执行很慢，甚至可能因为被墙导致无法正常安装hexo，安装失败的话建议启用科学上网或百度搜索npm加速方法解决

安装成功后的信息显示如下：

hexo-01.png

初始化Hexo

安装hexo完成后，在电脑中任意位置创建一个文件夹，名字可以随意取，这个文件夹就是存放hexo站点和以后写博客的地方，进入刚刚创建的文件夹，在空白位置右键选择Git Bash Here，

执行初始化hexo的命令

hexo init

初始化完成过程如下：

hexo-02.png

安装依赖包

npm install

这个命令是用来安装一些Node.js 模块。命令执行的结果如下：

hexo-03.png

git部署安装

npm install hexo-deployer-git –save

hexo-04.png

完成这一步，hexo的安装就已经完成了。进入站点文件夹查看内容如下：

hexo_folder.png

  • 注意：
    • hexo相关命令均在站点目录下执行，用Git Bash运行
    • 站点配置文件为站点目录下的 _config.yml文件，可以配置大部分的参数
    • package.json 存放着应用程序的信息，默认已安装EJS, Stylus 和 Markdown renderer等软件
    • scaffold 模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
      Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改
    • source 资源文件夹。是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去
    • themes 主题文件夹，hexo会根据主题来生成静态页面，主题配置文件为主题文件夹下的_config.yml文件

本地预览Hexo博客

第一次使用hexo，可以先在本地创建服务器使用

hexo generate # 生成静态页面 //可以直接用hexo g 命令

hexo s # 开启本地服务器

执行情况如下：

hexo-05.png

hexo-06.png

接下来到浏览器输入 localhost:4000 就可以看到页面内容了：

hexoLocalhost.png

至此，Hexo博客已经成功搭建在本地了

部署Hexo博客

github准备

  • 首先要有一个github帐号，注册并登录github
  • 然后新建一个仓库， 仓库名为：<Github账号名称>.github.io

将本地Hexo博客推送到新建的github仓库内

本教程使用http协议部署hexo博客

  • 修改配置文件blog/_config.yml，修改deploy项的内容（在文件末尾）。

    1
    2
    3
    4
    deploy:
        type: git
        repo: https://github.com/<Github账号名称>/<Github账号名称>.github.io.git
        branch: master

    注意：每个标签冒号后面都要有一个空格

  • 输入以下命令将hexo博客部署到github中，返回INFO Deploy done: git即成功推送

    hexo clean # 清空静态页面

    hexo generate # 生成静态页面

    hexo deploy # 上传到仓库

等待1分钟左右，浏览器访问网址： https://<Github账号名称>.github.io，自此，Hexo博客已经搭建到了github上

在Hexo博客中发布文章

新建一篇文章

  • 在hexo博客目录下，进入Git Bash命令窗口，输入以下命令：

    hexo new “Article”

  • 进入博客目录下的/source/_posts/ 文件夹，可以看到已经生成了名为Article.md的博客文件

    如图所示：

    articletest.png

  • 打开Article.md文件，进行编辑即可

给文章添加分类和标签

在打开的Article.md中，可以看到开头已经自动生成了一段配置列表，在其中设置tags和categories属性：

1
2
3
4
5
6
title: Article
date: 2019-09-07 20:46:51
tags:
- 博客
- hexo
categories: 测试

添加阅读全文按钮

  • 方法一：

    在文章任意你想添加的位置添加如下标签即可

    1
    <!-- more-->

    例如jQuery总结.md里的内容是：

    ---
    title: Article
    date: 2019-09-07 20:46:51
    tags:
    - 博客
    - hexo
    categories: web前端
    ---
    ## 如何引入jQuery
    **jQuery本质上就是一段普通的JavaScript代码， 通常使用引入外部JS的方式来使用jQuery**
    ```
    <script type="text/javascript" src=“js/jquery.js”></script>
    ```
    <!--more-->
    以下是正文内容，在首页预览内不显示

    在网页上显示的效果是：

    articlepage.png

  • 方法二：

    打开主题配置文件，找到auto_excerpt进行如下修改

    1
    2
    3
    auto_excerpt:
      enable: true
      length: 150

    length为摘要截取的字符长度

注：这两张方向显示的方法显示的样式不一样，可以都尝试一下选择喜欢的方式进行添加

在文章中插入图片

  • 方法一：

    • 在hexo目录下，安装插件

      npm install hexo-asset-image –save

    • 在hexo\source目录下新建一个img文件夹，把图片放置在里面

    • 在xxx.md文件中引用图片

      1
      ![header]( img/header.jpg)

  • 方法二：

    • 在全局配置文件hexo/_config.yml中将post_asset_folder设置为true

    • 创建文章（在创建的时候，会在hexo/source/_post目录下，生成一个XXX.md文件和一个XXX的文件夹）

    • 把XXX这个博文需要展示的图片放在XXX文件夹目录下

    • 在XXX.md文件中引入图片的方式

      1
      {% asset_img example.jpg This is an example image %}

  • 方法三：

    使用图床工具（本教程中插入的所有图片都是使用sm.ms提供的免费图床服务）

    进入sm.ms网站，首页就是上传图片区域，选择要上传的图片点击Upload按钮，底部即会自动生成各种格式的图片链接，复制Markdown专用的链接，粘贴到文章中即可显示图片

启动服务器，在本地进行测试

hexo s

发布文章到github上

待发布的文章在本地预览无误后，在Git Bash窗口执行以下命令

hexo clean && hexo g && hexo d

在浏览器访问网址： https://<Github账号名称>.github.io，即可看到已经发布的文章