github Pages + Hexo搭建个人博客(一) 初级篇
来源:互联网 发布:11选5软件 编辑:程序博客网 时间:2024/06/04 19:02
一、前言
之前一直是在有道云上做一些笔记的,上周末在网上看到了一些别人搭建的个人博客,顿时感兴趣起来,然后自己就瞎捣鼓了几天,最终搭建成功了,哈哈。在这个过程中发现,搭建一个网站还是比较简单的,难的是管理博客,更难的是写博客!!!
这个过程中,注册了自己的第一个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
安装好Hexo以后,在终端输入:
hexo
若出现下图,说明hexo安装成功:
三、使用Hexo建站
1. 初始化博客
新建一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站。比如我在终端进入到G:Github目录,输入hexo init hexo,则在该目录下创建了hexo博客文件夹。
hexo init [folder]
接下来进入到博客文件夹,这里是E:Github/hexo,执行如下命令,根据该目录下的package.json中既定的dependencies配置安装所有的依赖包
npm install
2. 配置
网站的主配置文件为hexo根目录下的_config.yml文件:
默认配置如下:
# Hexo Configuration## Docs: https://hexo.io/docs/configuration.html## Source: https://github.com/hexojs/hexo/# Sitetitle: Hexosubtitle:description:author: John Doelanguage:timezone:# URL## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'url: http://yoursite.comroot: /permalink: :year/:month/:day/:title/permalink_defaults:# Directorysource_dir: sourcepublic_dir: publictag_dir: tagsarchive_dir: archivescategory_dir: categoriescode_dir: downloads/codei18n_dir: :langskip_render:# Writingnew_post_name: :title.md # File name of new postsdefault_layout: posttitlecase: false # Transform title into titlecaseexternal_link: true # Open external links in new tabfilename_case: 0render_drafts: falsepost_asset_folder: falserelative_link: falsefuture: truehighlight: 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 & Tagdefault_category: uncategorizedcategory_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-DDtime_format: HH:mm:ss# Pagination## Set per_page to 0 to disable paginationper_page: 10pagination_dir: page# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: landscape# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy: type:
这些配置项所代表的意思可以参考Hexo中文网:_config.yml配置 ,我们需要修改的配置只有这几项,拿我自己修改的配置作为示例。
1). 修改网站相关信息
title: 新日三少的博客 subtitle: Big big pig description: Love Coding,Enjoy Lifeauthor: 新日三少language: zh-CN #themes主题文件夹下的languages下面有很多语言可选timezone: Asia/Shanghai
注意:每一项的填写,其:后面都要保留一个空格,下同。
2). 配置统一资源定位符(个人域名)
url: http://www.wangxinri.cn
对于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 generatehexo server
执行完后,打开浏览器,输入:
http://localhost:4000/
我们可以在浏览器端看到我们搭建好的博客和发布的文章,如果访问失败,可能端口被占用,更换端口 hexo server -p 5000 ,将默认4000端口换成5000。
4. 发布博客至github仓库
但是毕竟我们目前发布的博客只有本机看得到,怎么让其他人看到我们写的博客呢?这时候我们来看看博客的部署。
打开终端,进入到博客文件夹根目录,这里还是E:Github/hexo,执行如下命令:
hexo generatehexo deploy
输入我们的网址:xinrisanshao.github.io ,即可访问博客了。
此时查看github中的仓库,发现我们博客文件夹根目录中的public文件夹里面的文件已经发布到仓库中了。
此时搭建的博客还只是入门,外观确实一般般,接下来将更进一步,比如如何更换主题、如何管理博客等等。
- github Pages + Hexo搭建个人博客(一) 初级篇
- github Pages + Hexo搭建个人博客(二) 提升篇
- Github Pages 搭建HEXO主题个人博客
- hexo+github pages 搭建个人博客
- github Pages +hexo 搭建个人博客
- Hexo + Github Pages 搭建个人博客
- Hexo+GitHub pages 搭建个人博客
- hexo + github pages 搭建个人博客
- Hexo+Github Pages搭建个人博客
- 使用github pages+Hexo搭建个人博客
- github pages + hexo 搭建个人博客站点
- Hexo + Github Pages搭建个人独立博客
- Hexo-Github-Pages搭建个人独立博客
- Hexo+GitHub Pages搭建个人博客
- Hexo+GitHub Pages搭建的个人博客
- Hexo+Yilia搭建github Pages个人博客
- 利用Github Pages+Hexo搭建个人博客
- 利用Github Pages+Hexo搭建个人博客
- 17AHU排位赛3 D题 旋转吧!雪月花 ! (DFS序,线段树维护树上最值)
- ArcGIS中切片包 (.tpk)的介绍
- Maven| Maven项目出错集锦
- 数字三角形(版本I-III)[动态规划]
- 时间序列的分析和预测ARIMA
- github Pages + Hexo搭建个人博客(一) 初级篇
- Ubuntu python2.7.6 scikit-learn
- 分式规划和波束成形(MATLAB代码)
- 文章标题
- 采用SmartQQ 协议可制作聊天机器人
- ROS---发送自定义消息,接收消息
- 关于线性表的深入了解
- effective C++条款三十二
- python pydub用法(1)