美文网首页
Hexo博客搭建指南

Hexo博客搭建指南

作者: HeeeJianBo | 来源:发表于2017-10-17 16:39 被阅读0次

    最近熟悉的各路大神都纷纷从 Ghost 迁移为 Hexo。 好奇之下,在简单对比过后也选择了Hexo,主要是基于以下的两点考虑

    1. Hexo 直接使用 Markdown 文件在命令行生成博客、命令行进行部署; 更简洁方便
    2. Hexo 原生支持中文; 当然 Ghost 的话也可以使用 Ghost中文网

    本文只适用于 macOS; 其他平台仅供参考

    Hexo 安装

    安装 NodeJs

    首先,由于 Hexo 依赖于 NodeJs,所以需要先安装 Node,如果已经安装直接跳过。

    使用安装包安装

    1. 前往 https://nodejs.org/en/
    2. 下载 LTS 版本安装包(目前是 v6.11.3 LTS)
    3. 完成后、直接打开App点击安装就好

    使用brew安装

    打开终端执行以下命令

    # 安装 brew
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    
    # 安装 nodejs
    brew install nodejs
    

    完成安装后,打开终端执行 npm --versionnode --version 没报错证明 NodeJs 已成功安装

    安装 Hexo

    NodeJs安装完成后,执行以下步骤安装 Hexo 并创建一个博客工程。

    # 安装 hexo 
    npm install hexo-cli -g
    
    # 初始化博客工程
    cd ~/Desktop
    hexo init blog
    
    # 安装npm模块、
    cd blog
    npm install
    
    # 启动博客网站
    hexo server
    

    执行完最后一步,并输出以下内容。就代表一个完整Hexo博客搭建就大功告成了!打开 http://localhost:4000/ 体验下劳动成果吧!

    JianBoPro:blog JianBo$ hexo server
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
    

    原文参考: https://hexo.io/zh-cn/

    新建文章

    如文章开头提到的,Hexo 使用终端命令进行操作,新建一条博客的也是如下:

    # 仍然先进入到博客目录
    cd blog
    
    # 新建一条名为 hello 的博客
    hexo new hello
    
    # 再次启动博客网站
    hexo server
    

    原文参考: https://hexo.io/zh-cn/docs/writing.html

    更改主题

    Hexo 官方本身提供大量的主题供大家使用,而且很大一部分都支持中文。前往官方主题市场

    本文以当前博客使用的主题 confidante 为例:

    # 先找到主题的源码地址
    # 在签出主题代码到 博客的 themes 路径
    git clone https://github.com/JakeLaoyu/hexo-theme-confidante themes/confidante
    
    # 切换主题
    #  修改根目录下 _config.yml 文件
    theme: confidante
    
    # 再次启动博客网站
    hexo server
    

    以上命令执行完成后,浏览器打开 http://localhost:4000 就可以看到新的主题效果了

    ps: 如需修改主题里的其他内容,可以看看 themes/confidante/_config.yml 文件里面配置

    到目前为止,Hexo的安装使用基本都完成了

    部署

    接下来是Hexo的部署,在本地博客搭建后,需要把生成的静态页面部署到公网服务器,才能供其他人访问到你的博客。而一般大家常用到有俩种的方式

    1. 部署至Github。优点是免费,缺点是域名为 xxx.github.io
    2. 用 Nginx 部署在私有服务器上。缺点是需要自己购买服务器、域名等

    部署至Github

    1. 建一个名为 username.github.io 的仓, 如下图所示:
    create-repos.png
    1. 开启 Github Pages 进入到代码仓主页、点击 Setting 进入到设置页面,下拉滚动到 Github Pages 设置的地方、点击 Choose a theme
    enable-github-pages-1.png

    跳转页面后,然后直接点击 Select theme 完成选择主题选择。然后会跳转另一个页面,直接拉到底部点击 Commit 完成代码仓的首次提交。
    完成后再次进入 Setting 页面、看到 Your site is ready to be published at https://hjianbo.github.io/. 证明 Github Pages 功能已成功开启。

    enable-github-pages-2.png
    1. 配置 Github SSH免密提交代码

    2. 配置部署
      先在本地工程中安装 Github 部署用的支持工具

    # 工程目录下执行
    npm install hexo-deployer-git --save
    

    然后打开 _config.yml,将文件尾部的 deploy 部署部分改为:

    deploy:
      type: git
      repository: git@github.com:{youname}/{youname}.github.io.git
      branch: master
    

    编辑完成,保存。在工程目录下中执行 hexo d -g 进行发布部署。

    等待文件上传至Github成功,部署就全部完成了!! 尝试在浏览器中打开前面 步骤2 中给你的地址看看博客的效果吧!!

    部署至私有服务器

    1. 首先我们得有自己的一台 Linux 服务器。推荐: Vultr
    2. 配置服务器的免密SSH登录
    3. 在服务器端安装 Nginx。并建立博客路径
    4. 在服务器端安装 rsync
    5. 本地配置部署方式

    安装 hexo-deployer-rsync

    npm install hexo-deployer-rsync --save
    

    修改本地 _config.yml 配置

    deploy:
       type: rsync
       host: hjianbo.me
       user: root
       root: /var/www/blog
    
    1. 工程中执行 hexo d -g

    常见问题

    Q: 怎么显示图片?
    A: http://www.jianshu.com/p/c2ba9533088a

    相关文章

      网友评论

          本文标题:Hexo博客搭建指南

          本文链接:https://www.haomeiwen.com/subject/lxiduxtx.html