github Pages + Hexo搭建个人博客(一) 初级篇
2017-08-25 19:39
591 查看
一、前言
之前一直是在有道云上做一些笔记的,上周末在网上看到了一些别人搭建的个人博客,顿时感兴趣起来,然后自己就瞎捣鼓了几天,最终搭建成功了,哈哈。在这个过程中发现,搭建一个网站还是比较简单的,难的是管理博客,更难的是写博客!!!这个过程中,注册了自己的第一个github账号(很失败有木有,太out了),同时也了解了一些git的版本控制,还知道了Markdown这种标记语言,后面的这些博客都是用这个标记语言写的,还是很有收获的。
今天特地总结一下使用github Pages + Hexo搭建个人博客的过程,以备不时之需。这里不谈理论,只谈过程,理论自己也不是很清楚,就不瞎说了,以后慢慢熟悉了,在补充!
二、环境准备
1. 注册github账号
这个就不多说了,账号注册好后,登陆,在首页右边有一个 + 号图标,点击之后,选择New repository进行仓库的创建。Repository name命名为username.github.io(username是你的账号名,记住一定要这样命令哦),点击Create repository,创建成功。2. 安装Git
我们之所以要安装git,是因为后面我们要用到git命令,将生成的静态博客网页等信息推送至github仓库,我们的git使用一般由两种方式,一种是图形化界面(GUI),另外一种是通过命令行。这里我选择安装前者,带界面的,菜鸟嘛,不会git命令,先熟悉熟悉流程,顺带在这个过程中在了解git的一些常用命令。另外安装前者,在桌面上会生成两个图标, GitHub和Git Shell,这两个图标分别是图形界面和命令行工具,意思就是我们不仅可以使用图形界面的工具管理我们github上的仓库,同时也可以使用命令行的形式管理,自由切换,爽歪歪!Github for Windows: 点击下载
下载安装完后,桌面上生成GitHub和Git Shell两个图标,然后点击GitHub图标,输入前面注册的github账号和密码,登录完成,ok,暂时先这样,接着往下走。
Github for Windows 安装配置使用教程: 参考
3. 安装Node.js
安装Node.js,因为Hexo是一个基于Node.js的静态博客程序,所以首先安装Node.js。点击进入Node.js官网
我们选择左边的通用版,点击下载后,设置安装路径然后默认安装就可以了。
4. 安装Hexo
以上环境配好了之后,那么恭喜您!接下来只需要使用npm即可完成Hexo的安装。打开终端,输入:
npm install -g hexo-cli
如果执行这条命令时长时间未成功,那么请先使用下面的命令将npm镜像源更改为国内的镜像,再执行上面的安装命令,因为国外的镜像源很有可能被墙了。
npm config set registry https://registry.npm.taobao.org[/code]
安装好Hexo以后,在终端输入:hexo
若出现下图,说明hexo安装成功:三、使用Hexo建站
1. 初始化博客
新建一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站。比如我在终端进入到G:Github目录,输入hexo init hexo,则在该目录下创建了hexo博客文件夹。hexo init [folder]
接下来进入到博客文件夹,这里是E:Github/hexo,执行如下命令,根据该目录下的package.json中既定的dependencies配置安装所有的依赖包npm install2. 配置
网站的主配置文件为hexo根目录下的_config.yml文件:
默认配置如下:# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site title: Hexo subtitle: description: author: John Doe language: timezone: # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://yoursite.com root: / permalink: :year/:month/:day/:title/ permalink_defaults: # Directory source_dir: source public_dir: public tag_dir: tags archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: :lang skip_render: # Writing new_post_name: :title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link: true # Open external links in new tab filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false future: true highlight: enable: true line_number: true auto_detect: false tab_replace: # Home page setting # path: Root path for your blogs index page. (default = '') # per_page: Posts displayed per page. (0 = disable pagination) # order_by: Posts order. (Order by date descending by default) index_generator: path: '' per_page: 10 order_by: -date # Category & Tag default_category: uncategorized category_map: tag_map: # Date / Time format ## Hexo uses Moment.js to parse and display date ## You can customize the date format as defined in ## http://momentjs.com/docs/#/displaying/format/ date_format: YYYY-MM-DD time_format: HH:mm:ss # Pagination ## Set per_page to 0 to disable pagination per_page: 10 pagination_dir: page # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: landscape # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type:
这些配置项所代表的意思可以参考Hexo中文网:_config.yml配置 ,我们需要修改的配置只有这几项,拿我自己修改的配置作为示例。1). 修改网站相关信息
title: 新日三少的博客 subtitle: Big big pig description: Love Coding,Enjoy Life author: 新日三少 language: zh-CN #themes主题文件夹下的languages下面有很多语言可选 timezone: Asia/Shanghai
注意:每一项的填写,其:后面都要保留一个空格,下同。2). 配置统一资源定位符(个人域名)
url: http://www.wangxinri.cn[/code]
对于root(根目录)、permalink(永久链接)、permalink_defaults(默认永久链接)等其他信息保持默认。
如无个人域名,无需修改这一项。3). 配置部署
deploy: type: git repo: https://github.com/xinrisanshao/xinrisanshao.github.io.git branch: master
其中repo项是之前Github上创建好的仓库的地址,,可以通过如下图所示的方式得到:3. 本地发布博客
接下来,在网站中建立第一篇文章,打开终端,进入到博客文件夹根目录,这里是E:Github/hexo,然后输入hexo new "文章标题"
我们可以在本地博客文件夹source->_post文件夹下看到我们新建的markdown文件。通过Markdown编辑器对我们文章进行编辑,我这采用的是Markdownpad2编辑器。
MarkdownPad2:点击下载
Markdown语法:Markdown中文网
为了能够使Hexo部署到GitHub上,需要安装一个插件:npm install hexo-deployer-git --save
接下来,我们进行本地发布:hexo generate hexo server
执行完后,打开浏览器,输入:http://localhost:4000/
我们可以在浏览器端看到我们搭建好的博客和发布的文章,如果访问失败,可能端口被占用,更换端口 hexo server -p 5000 ,将默认4000端口换成5000。4. 发布博客至github仓库
但是毕竟我们目前发布的博客只有本机看得到,怎么让其他人看到我们写的博客呢?这时候我们来看看博客的部署。
打开终端,进入到博客文件夹根目录,这里还是E:Github/hexo,执行如下命令:hexo generate hexo deploy
输入我们的网址:xinrisanshao.github.io ,即可访问博客了。
此时查看github中的仓库,发现我们博客文件夹根目录中的public文件夹里面的文件已经发布到仓库中了。
此时搭建的博客还只是入门,外观确实一般般,接下来将更进一步,比如如何更换主题、如何管理博客等等。
相关文章推荐
- github pages + Hexo + 域名绑定搭建个人博客增强版
- github pages + Hexo + 域名绑定搭建个人博客增强版
- Hexo + Github Pages 搭建个人博客
- 使用Hexo和Github Pages搭建个人独立的博客
- 使用hexo和github pages搭建个人博客
- 个人博客的搭建-github pages + hexo vs wordpress
- GitHubPages+Hexo搭建免费个人博客(windows平台)
- 利用Github Pages和Hexo搭建个人博客
- 使用 Github Pages 和 Hexo 搭建个人博客
- Hexo+Github Pages搭建个人博客教程(maupassant主题)
- Hexo+GitHub pages 搭建个人博客
- Hexo+GitHubPages搭建个人博客
- GithubPages+Hexo搭建个人博客
- github pages + Hexo + 域名绑定搭建个人博客
- Hexo&Github-Pages搭建个人博客
- hexo + github pages 搭建个人博客
- github pages + hexo 搭建个人博客站点
- 使用github pages, hexo搭建个人博客教程
- 利用GitHub Pages和Hexo搭建个人博客
- github pages + Hexo + 域名绑定搭建个人博客