简介
之前在优快云写过几篇博客,但是一直觉得界面不够简洁,写博客的时候不太爽,想自己搭个人博客写,趁这个机会接触了hexo,记录下来。
PS: 以下过程是以Windows系统,大多数参考手把手教你建github技术博客,我按照自己的实际情况重新整理了一下。用Mac OS的同学可以参考20分钟教你使用hexo搭建github博客。
安装
安装hexo
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:
-
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
-
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
-
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的Node.js已经集成了npm,所以之前npm也一并安装好了。Windows我比较喜欢用PowerShell,包含了一些Linux的命令,也可以用vim。 然后使用npm安装hexo:
npm install -g hexo
安装过程中我是出现了一个warning:This package is no longer maintained,暂时可以无视。
创建hexo文件并安装依赖包
安装完成后,在该文件夹内执行以下命令,将在当前目录建立网站所需要的所有文件
hexo init
看到:
INFO Start blogging with Hexo!
说明建立完成,执行以下命令,安装所需依赖:
npm install
本地浏览
hexo generate hexo server
这里hexo默认用的是本地的4000端口,我第一次开启后发现访问不了,想了一下应该是已经被占用了,查询:
netstat -aon | grep 4000 tasklist | grep 上条命令结果最后的PID
是福昕,所以手动改下端口:
hexo s -p 5000
这里的s是server的缩写,下面会给出常用的缩写,在上面的命令执行后,浏览器访问:127.0.0.1:5000
,可以看到本地的博客已经搭建起来了。下面我们要做的是部署到GitHub上。
新建网站项目目录
注意格式,yourname.github.io
生成SSH密钥并添加
ssh-keygen -t rsa -C "你的邮箱地址"
,按3个回车,密码为空。
在C:\Users\Administrator.ssh
下,得到两个文件id_rsa
和id_rsa.pub
。打开id_rsa.pub
,复制全文。Add SSH key,粘贴进去。
hexo目录结构
├── .deploy #需要部署的文件 ├── node_modules #Hexo插件 ├── public #生成的静态网页文件 ├── scaffolds #模板 ├── source #博客正文和其他源文件,404、favicon、CNAME 都应该放在这里 | ├── _drafts #草稿 | └── _posts #文章 ├── themes #主题 ├── _config.yml #全局配置文件 └── package.json
全局配置 _config.yml
# Hexo Configuration ## Docs: http://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site #站点信息 title: #标题 subtitle: #副标题 description: #站点描述,给搜索引擎看的 author: #作者 email: #电子邮箱 language: #语言 # URL #链接格式 url: #网址 root: / #根目录 permalink: :year/:month/:day/:title/ #文章的链接格式 tag_dir: tags #标签目录 archive_dir: archives #存档目录 category_dir: categories #分类目录 code_dir: downloads/code permalink_defaults: # Directory #目录 source_dir: source #源文件目录 public_dir: public #生成的网页文件目录 # Writing #写作 new_post_name: :title.md #新文章标题 default_layout: post #默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿) titlecase: false #标题转换成大写 external_link: true #在新选项卡中打开连接 filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false highlight: #语法高亮 enable: true #是否启用 line_number: true #显示行号 tab_replace: # Category & Tag #分类和标签 default_category: uncategorized #默认分类 category_map: tag_map: # Archives 2: 开启分页 1: 禁用分页 0: 全部禁用 archive: 2 category: 2 tag: 2 # Server #本地服务器 port: 4000 #端口号 server_ip: localhost #IP 地址 logger: false logger_format: dev # Date / Time format #日期时间格式 date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/ time_format: H:mm:ss # Pagination #分页 per_page: 10 #每页文章数,设置成 0 禁用分页 pagination_dir: page # Disqus #Disqus评论,替换为多说 disqus_shortname: # Extensions #拓展插件 theme: #主题 exclude_generator: plugins: #插件,例如生成 RSS 和站点地图的 - hexo-generator-feed - hexo-generator-sitemap # Deployment #部署,将 lmintlcx 改成用户名 deploy: type: git repo: 刚刚github创库地址.git branch: master
注意:
-
冒号:后面都有一个空格
-
repo: 刚刚github创库地址.git
hexo常用命令
hexo help #查看帮助 hexo init #初始化一个目录 hexo new "postName" #新建文章 hexo new page "pageName" #新建页面 hexo generate #生成网页,可以在 public 目录查看整个网站的文件 hexo server #本地预览,'Ctrl+C'关闭 hexo deploy #部署.deploy目录 hexo clean #清除缓存,**强烈建议每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹**
简写
hexo n == hexo new hexo g == hexo generate hexo s == hexo server hexo d == hexo deploy
新建文章
hexo new "标题"
在 _posts 目录下会生成文件标题.md
--- title: Hello World date: 2015-07-30 07:56:29 #发表日期,一般不改动 categories: hexo #文章文类 tags: [hexo,github] #文章标签,多于一项时用这种格式 ---
正文,使用Markdown语法书写,编辑完后保存,hexo server 预览
部署
执行下列指令即可完成部署。
hexo generate hexo deploy
这里我deploy时,没有成功,出现了一个错误
ERROR Deployer not found: git
原来是需要装这个:
npm install hexo-deployer-git --save
再执行,出现以下提示,说明部署完成:
[info] Deploy done: git
点击 Github 上项目的 Settings,GitHub Pages,提示Your site is published at About - Run-Qing Chen (这是我自己的)
总结
在搭建博客的过程中,发现hexo真是简单好用啊,对于我这种没学过前端的,真是神器啊。也体会到了github能部署网站的厉害之处,之后想把两个网站来作个部署记录,还有绑定阿里域名和图床,也都会写出来。