如何利用hexo拥有一个本身的小站

迫于阿里云等云服务器太贵(穷则独善其身),又想拥有一个本身的小站点怎么办呢,hexo 来帮你。hexo 是一个快速、简洁且高效的博客框架,支持markdown,部署简单易上手。vue

hexo 官网node

hexo.io/zh-cn/git

相似的还有github

hugo : Go语言实现的静态网站生成器面试

gohugo.io/shell

vuepress : Vue 驱动的静态网站生成器npm

vuepress.vuejs.org/zh/json

还有wordpress等等。bash

准备工做

  • 一个 github 帐号(码云Gitee 也能够)
  • 本地安装 Node.js 环境,安装后自带 npm(Node.js的包管理工具)你要熟悉 node 和 npm 的基本命令。

多说一点,若是你是 macOS 推荐使用 brew 安装各类软件,管理起来很方便,若是你没有用过 brew 那你是时候了解一下了(Homebrew官网)。再多说一点 Homebrew 的做者就是那个曾经去 Google 面试,由于写不出反转二叉树被拒的大佬。服务器

我本地的 node 版本以下:

$ node -v
v11.6.0
$ npm -v
6.5.0
复制代码

安装 hexo

npm install -g hexo-cli 
复制代码

image.png

初始化

hexo init jiudian
复制代码

image.png

预览

进入到 jiudian 目录,其实如今已经能够在本地跑起来了。执行如下命令

hexo s
复制代码

跑起来以后访问 http://localhost:4000 (默认端口是4000),能够看到 hexo 默认的主题 landscape 。

来看下执行 hexo init 以后生成的目录以下,_config.yml 是一个比较重要的文件,基本的配置都在这里,好比主题的设置、网站的标题等等。 themes 文件夹下是主题。source 里是文章的内容。

.
├── _config.yml
├── db.json
├── node_modules
├── package.json
├── scaffolds
├── source
├── themes
└── yarn.lock
复制代码

默认的主题有点丑,咱们看看如何更换主题。在官网或者 github 搜索 hexo-theme 找到一个你喜欢的主题,好比我用 github.com/iissnan/hex… 。而后在你的站点目录也就咱们这里的 jiudian 目录下执行 git clone命令,把主题 clone 到 themes 文件夹下。

git clone https://github.com/iissnan/hexo-theme-next.git themes/next
复制代码

完成以后,修改 _config.yml 的 theme: landscape 属性,改为 theme: next。而后从新执行 hexo s,就能够看到效果了。

image.png

github部署

如何推送到 github 让全部人都能访问呢?

在 github 新建一个仓库,注意免费用户必定要创建 public repository 不然访问不了。仓库的名字是你的github用户名.github.io。接下来咱们安装下 hexo-deployer-git 这个插件。执行如下命令,hexo-deployer-git 做用是帮咱们把 hexo 生成的页面推送到 github。

npm install hexo-deployer-git --save
复制代码

安装完成后配置一下_config.yml 个人配置以下:

deploy:
  type: git
  repo: https://github.com/77Y/77Y.github.io.git
  branch: master
复制代码

而后依次执行

hexo g
hexo d
复制代码

执行完成以后访问 你的github用户名.github.io 就能够看到你的小站了。

发布文章

hexo new 如何利用hexo拥有一个本身的小站 
复制代码

执行以上命令能够发布一篇文章。完成后再执行 hexo s 能够看下效果

image.png

若是想发布到github须要再执行 hexo d

hexo 经常使用命令

$ hexo n "文章名称" (hexo new "文章名称") 建立
$ hexo g (hexo generate)生成
$ hexo s (hexo server)预览
$ hexo d (hexo deploy)部署
复制代码

配置域名

  • 在 hexo 建立的项目的 source 目录下建立 CNAME 文件,而后把本身的域名填进去。

image.png

  • 打开 github 项目的 setting,添加 Custom domain 同时选择 Enforce HTTPS ,将支持 https。

image.png

  • 在域名解析(这里是阿里云的控制台)里进行以下设置

image.png

最后大功告成,欢迎访问 democome.com

image.png
相关文章
相关标签/搜索