参考文档:免费个人博客搭建教程(详细-图文)
环境搭建
Node.js安装
参考:http://www.runoob.com/nodejs/nodejs-install-setup.html
没有VPN的用户可通过在命令行窗口中执行以下代码切换npm的源:
1npm config set registry http://registry.npm.taobao.org #切换npm为淘宝镜像Git安装
Hexo安装
在命令行窗口中执行:
1npm install -g hexo-cli #安装Hexo安装成功后可在命令窗口输入hexo,测试是否安装成功;
hexo常用命令说明:https://hexo.io/zh-cn/docs/commands.html
本地运行Hexo
使用Git Bash执行下列命令,folder就是我们要放文档的地方,注意每次使用的命令行操作的时候要切换到这个目录下面。
执行$ npm install时,出现以下警告:
fsevent是mac osx系统的,你是在win或者Linux下使用了 所以会有警告,忽略即可。
|
|
浏览器输入http://localhost:4000就可以看到效果。
如果输入后无法访问,可能是Hexo默认端口(4000)被占用,使用另外未被占有端口运行:
|
|
浏览器输入自然变成:http://localhost:5000。
修改Hexo的主题
- 可以在官方收录的主题中去挑选:Hexo主题;
- 主题下载后,将主题文件解压到Hexo项目的themes文件夹下面;
修改Hexo的配置文件_config.yml,将里面theme 对应的值改为之前下载的主题的文件夹名字;
_config.yml配置文档:https://hexo.io/zh-cn/docs/configuration.html
修改内容位置如下:
1234# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: hexo-theme-twentyfifteen-wordpress-master注意:这里“: ”后面必须要有一个空格,而且这个空格要在英文输入法下,不然会报一些稀奇古怪的错。
执行以下代码,重新在本地启动项目:
12345$ cd <folder> #切换到项目目录下$ npm install #install before hexo generate$ hexo clean #清除缓存文件 (db.json) 和已生成的静态文件 (public)$ hexo generate #生成静态文件$ hexo server -p 5000 #运行本地服务主题中也有一个叫_config.yml配置文件,其中主要是些与主题相关的设置,一般里面也都有注释。
更新博客文章
使用MarkDown来写博客文章,可使用有道笔记或者马克飞象之类的编辑器,链接:https://maxiang.io/;
在编辑器里面写好文章后,复制或另存为.md文件, 与普通的.md文件不同,要在文件开头添加下面代码:
12345title: #文章标题date: #文章日期tags: #文章标签categories: #文章分类---将写好的.md文件放入Hexo项目的source目录下的_posts文件夹中;
执行以下代码,重新在本地启动项目:
12345$ cd <folder> #切换到项目目录下$ npm install #install before hexo generate$ hexo clean #清除缓存文件 (db.json) 和已生成的静态文件 (public)$ hexo generate #生成静态文件$ hexo server -p 5000 #运行本地服务浏览器输入http://localhost:5000就可以看到效果。
遇到问题:
https://segmentfault.com/q/1010000000618915
问题描述:
我在_config.yml 中设置的菜单有Home,Archive,Category,About,
可是只有Home和Archive点进去才有内容,Category和About都错Can’t found,还需要其他哪里设置才能生效么?
解决方式:
在命令行里面输入:
1hexo new page "about"然后你会发现source里面多了个目录about,里面有个index.md文件。其实你也可以手动建立。页面的格式和文章一样。
接着把链接加上,themes/
/_config.yml里面的menu一项,添加一行About: /about。 完事。
页面国际化:https://hexo.io/zh-cn/docs/internationalization.html
1234567# Sitetitle: Hexosubtitle:description:author: John Doelanguage: zh-CN #设置themes下对应语言文件名,如themes\landscape\languages\zh-CN.ymltimezone:
发布静态Html文件到码云Pages上
参考文档:http://git.mydoc.io/?t=154714
注册一个码云帐号,并创建一个项目;
创建完项目后得到项目的Https的地址后面要用;
这里借用一个插件来帮助我们完成代码上传的工作,安装 hexo-deployer-git。安装代码如下:
npm install hexo-deployer-git –save #把public里面生成的文件推上到码云上。
配置项目根目录_config.yml文件,修改deploy的值;
123456# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:type: gitrepository: https://{用户名}:{密码}@git.oschina.net/{用户名}/{用户名}.gitbranch: master修改完后在命令窗口执行下面命令:
12cd <folder> #切换到项目目录下hexo deploy #一键部署功能登录码云,查看之前创建的项目中出现了本地项目中public文件夹中的文件,部署成功;
打开项目的Pages页,启动码云的pages服务,访问链接为启用时显示的网站地址;
如果你想以根目录的形式访问自己的静态网站,只需要建立一个与自己个性地址同名的项目即可,如 http://git.oschina.net/ipvb 这个用户,想要创建一个自己的站点,但不想以子目录的方式访问,想以ipvb.oschina.io直接访问,那么他就可以创建一个名字为ipvb的项目 http://git.oschina.net/ipvb/ipvb 部署完成后,就可以以 http://ipvb.oschina.io 进行访问了。