欢迎访问我的博客
一. 准备工作
电脑一台(本文是基于Mac)
安装Git
安装Node.js
GitHub账号一枚
如果读者电脑上已经装了git、Node、并且有GitHub账号,那么搭建个人博客绝对不超过抽一支烟的时间。
二. 安装git
1. 在 Mac 上安装 Git,官方给了有两种方式。最容易的当属使用图形化的 Git 安装工具,界面如图,下载地址在下:
Git GUI下载地址
![d6c71ff067e4afed0e57255a3d30d74f.png](https://i-blog.csdnimg.cn/blog_migrate/79d505f635d46c6256288720543d2bfd.jpeg)
git安装
2. 另一种是通过 MacPorts (http://www.macports.org) 安装。如果已经装好了 MacPorts,用下面的命令安装 Git:
$ sudo port install git-core +svn +doc +bash_completion +gitweb
译注:还有一种是使用 homebrew:brew install git。
安装git官网教程
三. 安装Nodejs
安装Nodejs也有两种方式GUI和终端命令
1. GUI下载地址
Nodejs安装包下载地址
2. 终端执行命令
先安装nvm,这是Nodejs版本管理器,可以轻松切换Nodejs版本。
curl方式安装nvm.
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
下面是nvm部分输出,重点在最后,只有执行最后几条命令nvm才算安装完成。
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 11329 100 11329 0 0 4130 0 0:00:02 0:00:02 --:--:-- 4130
=> Downloading nvm from git to '/Users/huanghaipo/.nvm'=> Initialized empty Git repository in /Users/huanghaipo/.nvm/.git/
=> Appending nvm source string to /Users/huanghaipo/.bashrc
=> bash_completion source string already in /Users/huanghaipo/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:
//这里是执行命令export NVM_DIR="/Users/leon/.nvm"[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
根据提示执行命令load nvm,最后几条命令每个人的都不同。
$ export NVM_DIR="/Users/leon/.nvm"$ [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"$ nvm
使用nvm安装node
$ nvm install node
验证node及npm版本,如果有下方输出证明安装成功。
$ node -v
v11.14.0$ npm -v6.7.0
四. 创建Github域名和仓库
1. 注册GitHub账号
注册Github账号,Username很重要,域名将是账号名加.github.io,username.github.io。
![15a2346d9e94b2ce69b3839ad177c9b4.png](https://i-blog.csdnimg.cn/blog_migrate/8daf0808196dbff3413ae44b5462ac58.jpeg)
注册账号
2. 创建仓库
注册账号后我们需要创建一个存储网站数据的仓库,点击首页右上角加号,点击New repository按钮创建仓库。
![074cea0f04a8aeb6e6bb4211b748dbdb.png](https://i-blog.csdnimg.cn/blog_migrate/13324d42ef504d6781b941dc704777de.jpeg)
创建仓库1
Respository name 中的username.github.io 的username 一定与前面的Owner 一致,记住username后面会用到。
![d9ed263f64f1e02f3d9f73892f8cc200.png](https://i-blog.csdnimg.cn/blog_migrate/a3d6d8dd085d0ce42308446e88f6155c.jpeg)
创建仓库2
到此准备工作已经全部完成了。接下来就是安装hexo了。
五. 安装Hexo
以上工作全部完成我们就可以安装Hexo了。一个崭新的博客将要出现。
1. 执行下方命令安装hexo
$ sudo npm install hexo-cli -g
安装完成后我们就可以初始化博客了,如果想要把文件放到某个目录下先cd到指定目录下在执行下方命令,如果没有指定目录默认是的你的个人主目录下。
//username就是你刚才仓库的名称$ hexo init username.github.io
![04ef8f2d855a72feb4e286e1e67441f3.png](https://i-blog.csdnimg.cn/blog_migrate/ec1564bfe99ccb69578206513fca7d94.jpeg)
文件路径
2. 配置博客设置
初始化博客后我们需要修改配置文件已达到想要的效果如名字、主题等。
主题安装
为了美观我们安装一个火热的主题。先cd到刚才生成的目录下执行下方命令。
$ cd username.github.io
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
基础设置
找到_config.yml文件username.github.io/_config.yml修改下方基础配置保存修改。 注意_config.yml中配置项的冒号后面要用空格隔开,再跟内容否则启动服务时会报错。
![30e5fd97f89df9a1b5836dc951c3a8ea.png](https://i-blog.csdnimg.cn/blog_migrate/227bc51a98df0d3c355bbaf5cd6f72e4.jpeg)
文件路径
title: huanghaipo //博客的名字author: huanghaipo //你的名字language: zh-Hans //语言 中文theme: next //刚刚安装的主题名称deploy:
type: git //Github发布repo: https://github.com/username/username.github.io.git // 刚创建的Github仓库链接也可以选择ssh
3. 编写文章
前期工作已近基本完成,接下来我们可以写文章了。发布就可以得到一枚个人博客,首先新建一个.md文件,命名为firstEssay.md,写入下方内容。放到username.github.io/source/_posts文件下。
---
title: 我的第一篇文章
---
**我的第一篇文章**
或者cd到你的博客文件夹执行下方命令行会得到一个md文件。
hexo new post "这是测试新建md文档" //名字随便取
执行完以上命令,得到md文件,内容如下。
---
title: 这是测试新建md文档
date: 2019-04-24 10:20:50 tags: //博客标签---
4. 启动测试
启动服务,直接浏览器中输入https://localhost:4000或者直接点击我 访问。
$ hexo s
5. 安装hexo-deployer-git自动部署发布工具
$ npm install hexo-deployer-git --save
6.发布
以上步骤都完成后,我们就可以把生成的静态网页文件发布到Github上。以后直接通过连接就可以访问这个博客了。
$ hexo clean && hexo g && hexo d
命令解释
hexo clean //清除缓存文件 (db.json) 和已生成的静态文件 (public)hexo g //生成缓存和静态文件hexo d //重新部署到服务器
如果你使用的是HTTP可能会让你输入账号密码,输入正确后,稍等片刻,就会吧文件上传到Github上,然后直接访问刚才username.github.io就能看到自己的博客了。如果有新的文章只需要放到username.github.io/source/_posts下然后执行上面的命令就OK了。
最终效果
![2d83aeca029aaa48e7406fd23ef4d789.png](https://i-blog.csdnimg.cn/blog_migrate/fe15e6726618c478130cfd97e2d6a021.jpeg)
博客
优化
如果觉得这个主题不好看请或者想要更新博客更方便、更美观,请看这里。
hexo主题
主题配置
基础配置
hexo插件
hexo常用命令
hexo new "postName" #新建文章hexo new page "pageName" #新建页面hexo generate #生成静态页面至public目录hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)hexo deploy #将.deploy目录部署到GitHubhexo help # 查看帮助hexo version #查看Hexo的版本
踩坑记录:
终端报错:
FATAL can not read a block mapping entry; a multiline key may not be an implicit key at line 70, column 1: ...
解决办法:_config.yml中配置项的冒号后面要用空格隔开,再跟内容
出现 error deployer not found:git 或者 error deployer not found:github 的错误
解决办法:执行 npm install hexo-deployer-git --save
中文乱码问题
解决办法:将文件的内容编码改为UTF8格式
'hexo sever'能够成功运行,但是localhost:4000无法访问
解决办法:执行hexo s -p 5000,改用其他端口启动