Mac搭建Hexo博客
前言
工作很长时间了,总是去看别人的技术博客,弄的都挺好的,就想着自己也弄一个,记录一下自己的学习经历,把遇到的坑点记录一下,总结一下,干
主要内容
发现大多数的博客都是Hexo驱动,使用的是Next 主题,废话不多说开始了
1. 基于Hexo和github搭建静态博客
1.建Github 域名和空间
1.1 需要一个Github 账号 创建仓库并命名为 userName.github.io 我就不截图了
2.安装
1.安装git(不需要多说了吧这个)
2.安装Node.js
- Homebrew 安装方式
$ brew install node
- 安装Hexo
> npm install -g hexo
然后等待一会儿,hexo会自动完成下载安装。Hexo安装完成之后,在你喜欢的位置随意创建一个文件夹(最好命名为userName.github.io)(刚开始随便命名的但是后来出现```-bash: hexo: command not found```的问题,所以尽量小心吧!!!),这个文件夹以后就是你存放本地博客的地方了,通过cd filepath(filepath替换成你创建的文件夹目录)命令,进入到你创建的文件夹目录,然后执行以下命令:
>hexo init
npm install
这样Hexo会在该文件夹创建本地博客所需的一切资源。这样本地博客就搭建好了,输入以下命令:
>hexo g // 全拼是:hexo generate,可以简写成 hexo g
hexo s // 全拼是:hexo server,可以简写成 hexo s
这样就开启了一个本地博客服务器,打开浏览器,在地址栏输入localhost:4000,就可以查看本地博客了,hexo默认生成了一片hello world博客。注意,以上hexo开头的命令,执行目录必须是你创建的博客文件夹目录。
这样你就可以在本地写你自己想要的东西了,对了还有发布,不发布的话只能你自己看到0.0
-
同步Hexo到github
在终端输入npm install hexo-deployer-git --save
完成等待 打开 本地博客目录 _config.yml 文件
deploy:
type: git //使用Git 发布
repo: https://github.com/userName/userName.github.io.git // 刚创建的Github仓库
branch: master
保存配置之后,在本地博客目录执行以下命令:
hexo clean // clean本地项目,防止缓存
hexo g // 根据你编辑的md格式的博客,生成静态网页
hexo d // 将本地博客发布到github
然后,在浏览器地址栏输入yourusername.github.io就可以访问你的博客了,别人也可以通过这个地址访问你的博客
2 NexT主题配置
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
然后修改_config.yml 文件的 theme: next 就可以了
3主要设置
NexT主题的详细配置请看这里
Hexo 的_config.yml
的 更多设置
4很粗糙,上述就是我的实际操作过程,
中间遇到一次 -bash: hexo: command not found
我就把hexo卸载了一次 npm uninstall hexo 重新安装(参照Mac搭建Hexo博客及NexT主题配置优化)就好了 (慎用,不知道原因所以直接杀死,最low)(个人原因,对命令行不怎么了解,上诉内容是踩坑后的结果)
5图片设置
1 把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true
2 在你的hexo目录下执行这样一句话npm install hexo-asset-image --save,这是下载安装一个可以上传本地图片的插件,
3 等待一小段时间后,再运行hexo n "xxxx"来生成md博文时,/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹
4 最后在xxxx.md中想引入图片时,先把图片复制到xxxx这个文件夹中,然后只需要在xxxx.md中按照markdown的格式引入图片:
![](xxxx/图片名.jpg)
5 最后检查一下,hexo g生成页面后,进入public\2017\02\26\index.html
文件中查看相关字段,可以发现,html标签内的语句是![](2017/09/30/xxxx/图片名.jpg)
,而不是<img src="xxxx/图片名.jpg>
。这很重要,关乎你的网页是否可以真正加载你想插入的图片。
详细过程和讲解请看
5分钟 搭建免费个人博客
Mac搭建Hexo博客及NexT主题配置优化