Hexo

Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。大家可以进入hexo官网进行详细查看,因为Hexo的创建者是台湾人,对中文的支持很友好,可以选择中文进行查看。

Hexo搭建步骤

  1. 安装Git
  2. 安装Node.js
  3. 安装Hexo
  4. GitHub创建个人仓库
  5. 生成SSH添加到GitHub
  6. 将hexo部署到GitHub
  7. 设置个人域名
  8. 发布文章

1/2步骤省略了,网上教程一大堆。(http://fangzh.top/2018/2018090514/

用hexo搭建博客


用 npm 安装话经常出现卡住而导致无法正常安装,解决办法就是修改 npm 的安装源,这里选择淘宝 NPM 镜像,这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。。

npm config set registry https://registry.npm.taobao.org

一次解决所有卡顿问题!


为了安装更加快速,我们先执行:npm config set registry https://registry.npm.taobao.org 更换源。

然后,在安装之前,先切换工作目录,因为安装其实也就是下载node_modules。我这里把我博客的目录放置在D盘:

用hexo搭建博客

然后安装hexo,输入:

npm install -g hexo-cli

window用户可能会出现如下警告:

用hexo搭建博客

fsevent是mac osx系统的,你是在win或者Linux下使用了 所以会有警告,忽略即可。值得注意的是,此时blog文件夹是空的:

用hexo搭建博客

依旧用hexo -v查看一下版本:

用hexo搭建博客

接着初始化一个hexo应用:

hexo init myblog  #myblog可以自己取什么名字都行

这里还是会有一些警告,忽略就好,如下图:

用hexo搭建博客

此时我们查看目录myblog,会发现我们的node_modules也就是前面安装的hexo:

用hexo搭建博客

  • node_modules: 依赖包
  • public:存放生成的页面  【编译自动生成。此时,由于没有执行页面生成命令,此时还没有public文件夹】
  • scaffolds:生成文章的一些模板
  • source:用来存放你的文章
  • themes:主题
  • _config.yml: 博客的配置文件

然后,在myblog目录下,执行如下命令就可以本地查看自己搭建的hexo:

hexo generate
hexo server

用hexo搭建博客

浏览器打开,输入链接,查看:

用hexo搭建博客

 GitHub创建个人仓库、购买域名,配置域名解析服务等,这里就不介绍了。参考网址里面很详细:http://fangzh.top/2018/2018090514/

用hexo搭建博客

本地Source添加CNAME文件,写入:baiyazi.top

然后,在博客项目主_config.yml中,修改deploy的数据项目:

deploy:
  type: git
  repo: https://github.com/baiyazi/baiyazi.github.io.git
  branch: master

登录GitHub,进入之前创建的仓库,点击settings,设置Custom domain,输入你的域名baiyazi.top

部署的时候需要先安装deploy-git ,也就是部署的命令,这样你才能用命令部署到GitHub。

npm install hexo-deployer-git --save

使用:

hexo generate   # 生成静态页面
hexo deploy     # 部署

部署完成后:

用hexo搭建博客

我们输入域名,查看:

用hexo搭建博客

至于其中的无涯明月,是我修改了配置文件中的title

可以查看官网学习配置https://hexo.io/zh-cn/docs/configuration

下面我们配置next主题:

你可以不安装next,可以去主题官网选选:https://hexo.io/themes/  然后,在这里下载:https://github.com/hexojs/hexo/wiki/Themes

我们配置我们的博客,先在本地配置,然后再发布到我们的github。

这里是next主题的官方网址:http://theme-next.iissnan.com/getting-started.html

定位到 Hexo 站点目录下,输入:

git clone https://github.com/iissnan/hexo-theme-next themes/next

用hexo搭建博客

然后,启用主题,即在你博客目录配置文件_config.yml中,修改

#theme: landscape
theme: next

保存后,执行如下命令,查看效果:

hexo generate      # 生成静态网页
hexo server        # 执行本地服务

本地查看:

用hexo搭建博客

我不太喜欢这种类型的,然后我需要设置我的主题:

在D:\blog\myblog\themes\next目录中的_config.yml【主题配置文件】中:

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse       #这里是默认值
scheme: Mist
#scheme: Pisces
#scheme: Gemini

https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html

添加了不蒜子、leancloud+valine评论

网上教程很多,这里不写了

 

 

 

 

 

相关文章: