Hexo
Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。大家可以进入hexo官网进行详细查看,因为Hexo的创建者是台湾人,对中文的支持很友好,可以选择中文进行查看。
Hexo搭建步骤
- 安装Git
- 安装Node.js
- 安装Hexo
- GitHub创建个人仓库
- 生成SSH添加到GitHub
- 将hexo部署到GitHub
- 设置个人域名
- 发布文章
1/2步骤省略了,网上教程一大堆。(http://fangzh.top/2018/2018090514/)
用 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,输入:
npm install -g hexo-cli
window用户可能会出现如下警告:
fsevent是mac osx系统的,你是在win或者Linux下使用了 所以会有警告,忽略即可。值得注意的是,此时blog文件夹是空的:
依旧用hexo -v查看一下版本:
接着初始化一个hexo应用:
hexo init myblog #myblog可以自己取什么名字都行
这里还是会有一些警告,忽略就好,如下图:
此时我们查看目录myblog,会发现我们的node_modules也就是前面安装的hexo:
- node_modules: 依赖包
- public:存放生成的页面 【编译自动生成。此时,由于没有执行页面生成命令,此时还没有public文件夹】
- scaffolds:生成文章的一些模板
- source:用来存放你的文章
- themes:主题
- _config.yml: 博客的配置文件
然后,在myblog目录下,执行如下命令就可以本地查看自己搭建的hexo:
hexo generate
hexo server
浏览器打开,输入链接,查看:
GitHub创建个人仓库、购买域名,配置域名解析服务等,这里就不介绍了。参考网址里面很详细:http://fangzh.top/2018/2018090514/
本地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 # 部署
部署完成后:
我们输入域名,查看:
至于其中的无涯明月,是我修改了配置文件中的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
然后,启用主题,即在你博客目录配置文件_config.yml中,修改
#theme: landscape
theme: next
保存后,执行如下命令,查看效果:
hexo generate # 生成静态网页
hexo server # 执行本地服务
本地查看:
我不太喜欢这种类型的,然后我需要设置我的主题:
在D:\blog\myblog\themes\next目录中的_config.yml【主题配置文件】中:
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse #这里是默认值
scheme: Mist
#scheme: Pisces
#scheme: Gemini
添加了不蒜子、leancloud+valine评论
网上教程很多,这里不写了