初探Hexo框架

前言

  • Hexo是一款基于Node.js的快速、简洁且高效的静态博客框架,因为Hexo的创始者是台湾人,所以对中文的支持很友好,非常适合技术人员搭建自己的Blog
  • 笔者是在win10环境下搭建的,所以下面的教程默认在win10下适用(macOS和win搭建方式大同异)
  • 开始前默认电脑安装了git工具,后面会利用git工具下载Blog的主题,并把搭建的静态博客托管在GitHub,公网可访问

1 安装Node.js

  • Hexo是基于Node.js编写的,所以需要安装一下nodeJs和里面的npm工具

  • Node.js 官网下载与自己操作系统相对应的文件即可

    我下载的是 node-v10.16.0-x64.msi

  • 把下载好并安装后生成的的文件夹添加到系统变量PATH中

  • 验证安装:打开cmd,分别输入命令 node -vnpm -vclea 回车。如果安装成功的话会输出版本信息:

    1
    2
    3
    4
    C:\Users\xihao>node -v
    v10.16.0
    C:\Users\xihao>npm -v
    6.9.0
  • npm换源:在国内使用npm工具的话受网络影响,速度慢且可能出现异常,所以我们进行换源,更换成国内淘宝团队的镜像源,键入命令:

    1
    C:\Users\xihao>npm install -g cnpm --registry=https://registry.npm.taobao.org

    验证换源成功:

    1
    C:\Users\xihao>cnpm -v

2 安装Hexo

  • 前面git和Node.js安装好后,就可以安装Hexo了

    输入命令:cnpm install -g hexo-cli

    1
    C:\Users\xihao>cnpm install -g hexo-clii
  • 验证安装:依旧用hexo -v查看一下版本

    1
    C:\Users\xihao>hexo -v

    至此就全部安装完了。

3 创建站点

​ 接下来我们就要开始创建我们的Blog的站点

  • 把cmd的路径切换到自己想要存放站点文件的路径下,并创建站点文件夹(My_blog),笔者放到了f盘符根目录。

    1
    2
    3
    C:\Users\xihao>f:
    F:\>md My_blog
    F:\>cd My_blog
  • 初始化Hexo

    1
    F:\My_blog>hexo init

    这样就在My_blog文件夹下创建了站点

  • My_blog站点的文件结构的含义为:

    |- node_modules :站点的依赖包
    |- public :存放生成的页面
    |- scaffolds :生成文章的一些模板
    |- source :用来存放你的文章
    |- themes :主题
    |- _config.yml :博客站点的配置文件

4 添加主题

  • https://hexo.io/themes/ 上挑选自己喜欢的Blog主题,我选择的是 Next 这款主题,找到相应的 GitHub 地址,在博客根目录下,利用git命令 git clone 下来:

    1
    F:\My_blog>git clone https://github.com/iissnan/hexo-theme-next themes/next
  • 修改 My_blog/_config.yml 配置文件的内容,更改配置 theme = next(注意等号右边有一个空格)

5 创建Blog

​ 这篇Blog就是我们写的第一篇博客

  • 在My_log根目录下,键入命令hexo new "基于Hexo框架傻瓜式搭建自己的Blog" 回车, 就会在F:\My_blog\source\_posts路径下自动生成 基于Hexo框架傻瓜式搭建自己的Blog.md文件。

    1
    2
    F:\My_blog>hexo new "基于Hexo框架傻瓜式搭建自己的Blog"
    INFO Created: F:\My_blog\source\_posts\基于Hexo框架傻瓜式搭建自己的Blog.md
  • 打开编辑 基于Hexo框架傻瓜式搭建自己的Blog.md

    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: 基于Hexo框架傻瓜式搭建自己的Blog
    date: 2019-05-29 14:35:49
    tags:
    ---


    # 前言
  • 这就是你要写的文章了.另外文章的位置一定是在 My_blog\source\_posts 下,改动了位置会导致文章内容显示不出来。

6 本地预览

  • 在你的站点根目录执行 hexo server 命令进行调试:

    1
    2
    3
    F:\My_blog>hexo server
    INFO Start processing
    INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
  • 此时本地服务已启动,浏览器里打开: http://localhost:4000

    即可访问刚刚写好的第一条博客

7 部署到GitHub

​ 接下来我们将Hexo和GitHub关联起来,也就是将Hexo生成的文章部署到GitHub上

  • 首先在个人的github上创建一个repository,注意仓库名要与自己个github账户名一致,例如:YourgithubName是你的GitHub账户,那么YourgithubName.github.io就是你的仓库名

  • 打开站点配置文件 _config.yml,翻到最后,修改为:

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

    (注意:冒号:后都有一个空格)

  • 安装部署插件deploy-git,这样你才能用命令部署到GitHub

    1
    F:\My_blog>cnpm install hexo-deployer-git --save
  • 最后部署(每次修改、添加文章后都要进行这一步)

    1
    2
    3
    F:\My_blog>hexo clean
    F:\My_blog>hexo generate
    F:\My_blog>hexo deploy

    其中 hexo clean 清除了你之前生成的东西,也可以不加。
    hexo generate 顾名思义,生成静态文章,可以用 hexo g缩写
    hexo deploy 部署文章,可以用hexo d缩写

    注意:deploy时可能要你输入你github的username和password。

  • 部署成功后

    过一会儿就可以在http://yourname.github.io 这个网站看到你的博客了!!

结语

​ 到这里,一个简单的个人博客我们就已经搭建起来了!关于一些其他个性化的设置,大家可以自己百度去探索,诚然,探索的过程是充满乐趣的。

资料

hexo官方文档

hexo史上最全搭建教程

开始使用 - NexT 使用文档

hexo的next主题个性化配置教程