Mac端使用Hexo + GitHub搭建博客

Python面面观

共 2755字,需浏览 6分钟

 ·

2020-12-20 09:23

之前有用Django搭建博客的一个教程系列,今天再发一个 Hexo + GitHub 的简单版本。虽然网上已经有了很多类似教程,但是能让非技术人员跟着做下来的很少,所以还是整理下。

Hexo 的官网介绍:

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

接下来开始开始一步步说明。

GitHub 账号注册及仓库创建

  • 如果还没有 GitHub 账号,那么需要先创建 GitHub 账号(因为网页和博客数据是托管在 GitHub 上)。进入 GitHub官网,注册账号成功后,创建一个新的仓库。创建仓库的名字必须为 username.github.io,这里的 username 就是注册 GitHub 时的用户名,需要一致。如果不一致,后续会显示 404。

    image-20201215211152340
  • 创建页面不需要选择太多内容。仓库选择公开就行。

安装node.js

  • 首先检查是否安装了node.js

    node -v # 是否出现安装版本信息,出现说明已经安装了
  • 如果未安装,去Node.js官网下载相应的安装包,安装就行。

    #安装完成之后打开终端,分别输入一下命令,如果出现版本信息,就说明安装成功。
    node-v   
    npm -v

安装 Git

安装 Git 主要是因为需要提交代码到 GitHub。Mac 下安装Xcode就自带Git。

  • 首先检查是否安装了 Git

    git --version # 是否出现安装版本信息,出现说明已经安装了
  • 未安装通过 Homebrew(安装Homebrew这里就不写了,有官网说明可以查看) 安装 Git,终端命令输入:

    brew install git

配置SSH Key

配置 SSH Key 主要是为了方便本地博客文件上传到 GitHub。配置教程说明

安装Hexo

  • 安装 Hexo。接下来只需要使用 npm 即可完成 Hexo 的安装。如果可以的话,建议先去 Hexo 官网了解下相关命令。

    npm install -g hexo-cli
  • 如果有报错信息,比如

Error: EACCES: permission denied, access '/usr/local/lib/node_modules

原因: 执行命令行时没有获得管理员权限 解决方案:在命令行前面添加 sudo 获取管理员权限,输入管理员密码就行 例如原来的是: npm install -g hexo-cli应该改为:sudo npm install -g hexo-cli

再输入密码就行。如果没有提示权限报错信息,则继续。

  • 创建博客目录。在任意位置创建一个文件夹,如 MyBlog,cd 到该路径下。

    # 在你选择的目录下创建一个MyBlog文件夹
    mkdir MyBlog
    # 进入目录
    cd MyBlog
  • 初始化目录,在 MyBlog 目录下

    hexo init
  • 启动本地服务

    hexo s 
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

    如果出现以上信息说明成功,浏览器输入http://localhost:4000/ 就可以访问了。

博客关联到 GitHub 仓库

博客文件夹MyBlog中的_config.yml文件,这是博客的主要配置文件。

  • 编辑博客配置文件_config.yml中的deploy节点。记得将username换成自己的username

    deploy:
      type: git
      repo: git@github.com:username/username.github.io.git
      branch: master

    注意:repo为这种形式的是配置了SSH Key之后的,如果没有配置则使用Https形式的地址。下图是地址位置。

  • 为了能够使Hexo部署到GitHub上,需要安装一个插件,在博客目录下运行以下命令

    npm install hexo-deployer-git --save
  • 然后在博客目录中执行

    #清除缓存
    hexo clean
    # 产生静态网页
    hexo g
    # 部署到GitHub page上
    hexo d

    在浏览器输入username.github.io就可以访问你的博客了

博客操作方式

创建新文章,博客目录下执行以下命令

hexo new '文章标题'

或者不想用命令行的话,直接去 source > _posts 文件夹下,新建博客md文档就行。博客其他的分类创建、标签创建这些博客操作,都可以看 Hexo官网。有详细说明。

  • 编辑完成之后本地地址预览,在博客目录下运行以下命令

    hexo clean && hexo g && hexo s
  • 预览没问题后,完成之后上传Github,在博客目录下运行以下命令

hexo clean && hexo g && hexo d

博客的主题选择

博客的主题选择,可以直接去 Hexo官网查看,对于没有技术前端基础的同学,建议选择使用人数较多,文档详细的主题。因为一些较偏的主题文档不全,报错了会很麻烦。有些即使按照教程一步步操作,也有肯能因为 Hexo 的版本等各种原因而出现各类报错。我观察了下,Next主题维护和使用的人比较多,可以选择使用看看。

绑定个人域名

如果还想拥有个人博客域名,可以继续往下设置。在国内可以直接去万网买。进入万网/控制台/云解析DNS/域名解析/解析设置

  • 获取 GitHub 的二级域名 IP 地址

    ping username.github.io
    #例如:ping zhangsan.github.io
  • 在万网解析域名如下设置

  • 在 hexo 项目下,source 文件夹下面创建 CNAME 文件(没有后缀名的),在里面写上购买的域名。比如:

  • 在GitHub上面,打开username.github.io项目的(Settings)设置,然后在 GitHub Pages的 Custom domain设置里填上购买的域名。比如:

域名绑定成功,已经可以用独立域名访问博客了。


相关链接:

  • Hexo 官网:https://hexo.io/zh-cn/docs/

  • Node.js官网:https://nodejs.org/en/

  • Next主题:https://github.com/theme-next/hexo-theme-next

浏览 28
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报