Hexo-完全免费全平台搭建个人博客(1)-整体搭建

2017-03-0911:04:17 发表评论 2,405℃热度

几个月前就想写这篇文章了,很多人也让我写过,也帮很多人搭建过,但是一直没时间纪录下来,这次有时间了,把安装的过程详细的记录下来。虽然网上有大量教程,我为什么又要造轮子呢?因为长时间的观察和浏览,教程这东西写的详细的很少,当然还是有的,百度上大部分都是一模一样的教程,博主为了浏览量爬虫或者粘贴复制过来的,参考价值不大,排版混乱。所以,自己动手写一个,让初学者不走弯路。

教程分为四大部分:

  1. Hexo 本地部署(博客前端设置)
  2. Hexo 简单个性化(博客前端设置)
  3. 文章迁移(可选)
  4. Github域名设置(博客后端设置)
  5. Hexo 与 Github 关联(前端后端连接)

1.Hexo本地部署

1.1.安装Homebrew

Homebrew 是一个套件管理器,安装完之后就可以用 brew 命令安装各种依赖软件,类似于 Linux 下的 apt-get 和 yum。进入 Homebrew 的官方中文网站:Homebrew 官方网站,打开 Mac 的终端,输入一行命令:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" ,稍作等待,就可以安装成功,我的电脑基本上都是挂着 ss 的,你们如果没有梯子的话,下载速度可能有点慢,Mac 用户在编译时可能会遇到问题,请先到 App Store 安装 Xcode,Xcode 完成后,启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

1.2.安装 Node.js

a.输入命令brew install wget ,安装 wget:

b.输入wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh  安装nvm,这一步是为了安装 Node.js,因为安装 Node.js 的最佳方式是使用 nvm。

c.输入nvm install stable  安装 Node.js:

1.3.安装Git

输入brew install git 安装 Git:

1.4.安装Hexo

输入npm install -g hexo-cli  安装我们今天的主角:

2.Hexo 简单个性化

我们来看一看 Hexo 的主页:

让我们继续设置下我们的博客,这里简单配置下然后修改下样式,后面大家有时间研究可以深入研究,先初始化一个 Hexo 目录,用来放我们所有的博客静态文件,文件夹命名随意,这里我规范点,以 timhbw.github.io 命名,因为这个就是GitHub 提供给我们的免费域名,后面会讲到。输入hexo init xxxxx :

然后执行下面命令,1.进入博客目录,2.安装 npm模块,安装在node_modules目录下图中执行的hexo generate  暂时可以不用执行,是用来生成静态文件的:

  1. cd xxxxx
  2. npm install

启动 Hexo 本地服务,输入hexo server  ,然后浏览器输入http://localhost:4000/,点击访问:

默认的主题不太美观,还是换一个主题比较好,就换 NexT主题,Hexo 平台用户量数一数二的,外观、效果、扩展性也的确没话说,可玩性高。输入git clone https://github.com/iissnan/hexo-theme-next themes/next 安装 NexT 主题,关于 NexT 主题,可以去官网看一看,做 iOS 想必大家都熟悉瞄神,他的主题在这里,Hexo 官方收录的主题在这里

下载好文件到博客目录的themes文件夹下后,系统怎么知道你要用哪一个主题呢?当然要自己修改配置文件了。打开_config.yml 文件修改66行左右为theme: next :

修改主题为 next 后,可以顺便把配置文件里面的其他东西一并修改,下面是我修改好的_config.yml ,个人添加了详细解释,大家根据自己情况修改(_config.yml是博客的整体配置文件,很多基础配置、插件配置等都需要在里面进行,有些是在主题里面设置。要注意的是,该文件格式要求比较严格,冒号后要一定有空格,不要 Tab 缩进,用空格)

  1. # Hexo Configuration
  2. ## Docs: https://hexo.io/docs/configuration.html
  3. ## Source: https://github.com/hexojs/hexo/
  4. # Site
  5. title: Tim博客 #网站标题
  6. subtitle: 不忘初心,方得始终 #网站副标题
  7. description: 自学iOS开发进阶博客,分享高质量的iOS开发技术。#网站描述
  8. author: Timhbw #您的名字
  9. language: zh-Hans #网站使用的语言
  10. timezone: UTC #网站时区。Hexo 默认使用您电脑的时区。
  11. # URL
  12. ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
  13. url: http://timhbw.github.io #网址
  14. root: /  #网站根目录
  15. permalink: :year/:month/:day/:title/ #文章的 永久链接 格式
  16. permalink_defaults: #永久链接中各部分的默认值
  17. # Directory
  18. source_dir: source #资源文件夹,这个文件夹用来存放内容。
  19. public_dir: public #公共文件夹,这个文件夹用于存放生成的站点文件。
  20. tag_dir: tags #标签文件夹
  21. archive_dir: archives #归档文件夹
  22. category_dir: categories #分类文件夹
  23. code_dir: downloads/code #Include code 文件夹
  24. i18n_dir: :lang #国际化(i18n)文件夹
  25. skip_render: #跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。
  26. # Writing
  27. new_post_name: :title.md #新文章的文件名称
  28. default_layout: post #预设布局
  29. auto_spacing:true #在中文和英文之间加入空格
  30. titlecase: false #把标题转换为 title case
  31. external_link: true #在新标签中打开链接
  32. filename_case: 0 #把文件名称转换为 (1) 小写或 (2) 大写
  33. render_drafts: false #显示草稿
  34. post_asset_folder: false #启动 Asset 文件夹
  35. relative_link: false #把链接改为与根目录的相对位址
  36. future: true #显示未来的文章
  37. highlight: #代码块的设置
  38.   enable: true
  39.   line_number: true
  40.   auto_detect: false
  41.   tab_replace:
  42. # Category & Tag
  43. default_category: ios #默认分类
  44. category_map: #分类别名
  45. tag_map: #标签别名
  46. # Date / Time format
  47. ## Hexo uses Moment.js to parse and display date
  48. ## You can customize the date format as defined in
  49. ## http://momentjs.com/docs/#/displaying/format/
  50. date_format: YYYY-MM-DD #日期格式
  51. time_format: HH:mm:ss  #时间格式
  52. # Pagination
  53. ## Set per_page to 0 to disable pagination
  54. per_page: 10 #每页显示的文章量 (0 = 关闭分页功能)
  55. pagination_dir: page #分页目录
  56. # Extensions
  57. ## Plugins: https://hexo.io/plugins/
  58. ## Themes: https://hexo.io/themes/
  59. theme: next #当前主题名称。值为false时禁用主题 # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: #部署部分的设置 type:

3.文章迁移(可选)

如果是刚刚开始写博客读者,可以直接看 GitHub 域名设置了。有些人是其他博客转过来的,之前还有文章,一篇一篇复制过来太慢,像我的文章快100多篇了,手动转换的话估计没人愿意转移到 Hexo 平台下。所以就有一键迁移这个工具,我试了下,效果还不错。

支持以下格式迁移:

  • RSS
  • Jekyll
  • Octopress
  • WordPress
  • Joomla

这里我以用户数量庞大的WordPress 为例:

先在 Mac 终端里面输入npm install hexo-migrator-wordpress --save  插件用来迁移 WordPress 文章,然后根据图中所示登录 WordPress 后台下载好 xml 格式的文件:

然后回到终端,输入如下命令,注意 xml 文件的路径请修改为自己的路径:

  1. hexo migrate wordpress /Users/timhbw/Downloads/tim.wordpress.2017-03-08.xml

然后重新启动 Hexo,输入hexo server  ,然后浏览器输入http://localhost:4000/,点击访问:

4.Github域名设置

经过以上步骤,网站在本地已经有模有样了,就差部署到服务器上了,这样普通用户就可以通过网络任意访问你写的文章,而不是只有你本地或者局域网能访问,那这样博客的意义也就消失了。这里既然是免费,那就采取 GitHub 的免费服务器和免费域名,如果折腾一会儿,想要更好的性能或者权限,就得自己购买服务器和域名,域名30左右,服务器国内阿里云,腾讯云一般60左右一个月,一般人不会掏这个钱,国外 VPS 性价比比较高,可以搭建梯子还可以放置个人博客等等,价格100到几千一年不等。下面开始 Github 服务端部署:

4.1.注册一个 GitHub 账号

注意注册账号时填写的 username,将会是你的域名的一部分,你的域名是 username.github.io 这个样子,所以取一个自己常用的,有代表性的 username。如果已经有了可以进行下一步。

4.2.新建一个仓库

4.3.设置仓库信息

Repository name设置为username.github.io,Description (描述)可以选填:

创建好仓库后稍作设置,就可以访问了:

5.Hexo 与 Github 关联

5.1.修改 Hexo 配置文件

文件位于xxxxx.github.io/_config.yml ,注意配置文件内的冒号后要有空格:

这里只要修改Deployment 部分,大家根据自己情况修改,不要照抄:

  1. # Deployment
  2. ## Docs: https://hexo.io/docs/deployment.html
  3. deploy:
  4.   type: git #用 Git 发布
  5.   repo: https://github.com/Timhbw/timhbw.github.io.git #刚刚在 Github 上创建的仓库的地址

然后安装安装 hexo-deployer-git

  1. npm install hexo-deployer-git --save

然后一键部署,只需一条命令就能将网站部署到服务器上:

  1. hexo deploy

更多常用的命令:

  1. hexo clean && hexo g -s  #清除、生成、启动
  2. hexo clean && hexo g -d  #清除、生成、部署
  3. hexo new "postName" #新建文章
  4. hexo new page "pageName" #新建页面
  5. hexo generate #生成静态页面至public目录
  6. hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
  7. hexo deploy #将.deploy目录部署到GitHub
  8. hexo help #查看帮助
  9. hexo version #查看Hexo的版本

发布完成,可以进 Github 上看一看自己的仓库:

打开 GitHub 上你的仓库,刷新一下页面,然后访问 xxxxx.github.io,就可以看到你的博客了。

5.总结

到这里,简单的搭建一个完全免费的个人博客已经搞定。其实还是挺简单的,而且有官方文档,挺详细的,想要更多的设置,更加个性化,还有很多要做,一步一步来,先把整个框架搭起来,保证博客能访问。后面我会写一篇关于 Hexo 个性化设置的详细文章,以我的博客为基础,让大家也能够实时的看到效果。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coding+

使用 Hexo & GitPage 搭建博客

GitPage 是个什么东西?它和 GitHub 是什么关系?Hexo 又是什么?它和 GitPage 又是什么关系?为什么我要用 Hexo + GitPage...

22230
来自专栏西安-晁州

Xss和Csrf介绍

Xss和Csrf介绍 Xss Xss(跨站脚本攻击),全称Cross Site Scripting,恶意攻击者向web页面中植入恶意js代码,当用户浏览到该页时...

38290
来自专栏葡萄城控件技术团队

HTML5 & CSS3初学者指南(3) – HTML5新特性

介绍 本文介绍了 HTML5 的一些新特性。主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件 Web存储 HTML5...

27780
来自专栏不二小段

【爬虫军火库】AnyProxy安装使用【Windows】

分析网络请求详情是写爬虫应用的初始步骤,抓包便是一种十分强大的分析手段,尤其是对手机App进行抓包,往往能收获到Web端没有的API接口。抓包的工具多种多样,功...

2.3K60
来自专栏腾讯NEXT学位

小程序iOS客户端框架——控件事件逻辑框架与控件原生化(上)

? 小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打...

22010
来自专栏信安之路

审计某开源商城中的漏洞大礼包

首先这个 CMS 并不怎么出名,拿来当审计样板却很合适。给我的感觉是适合初级水平升中级之间的过程,也算是对上一篇审计文章的后续文了。

15600
来自专栏武军超python专栏

2018年8月9号飞机大战项目答辩得到的经验和基本的win终端命令

今天遇到的新单词: adapter n适配器 virtual adj 虚拟的 interface n接口 corporation n公司,法人

13030
来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——安装配置 atom 编辑器

打造前端 Deepin Linux 工作环境——安装配置 atom 编辑器 好,我个人推荐大家使用 atom 编辑器,第一是免费,第二是好看,第三是好用。 安装...

64080
来自专栏区块链

XSS攻击——每周小讲堂

我们从一个很蠢的例子开始。 假设网站上有一个很简单的输入框,如果输入123并提交,就会保存并显示在url上。 比如现在填一段JS代码字符串并提交,就会得到一个包...

21560
来自专栏生信技能树

点击此文,无需转发,即可下载上千个免费R包

写在前面: 谨以此文献给那些“奋斗”在转发送别人资源,为了博人眼球,而践踏别人的辛勤的劳动成果的公众号们。 当然了,R包本来就是免费的,你只是不会下载而已,所以...

44680

扫码关注云+社区

领取腾讯云代金券