如何从零开始搭建自己的博客(通俗易懂)
序
作为一名合(zhuang)格(bi)的程序猿,经常写点东西,肯定少不了各种网站、博客,通俗的CSDN,文艺的简书,强大的GitHub,以及微信、掘金、知乎等等风格迥异的平台。不过,再多的地方,也容不下一颗想捯饬的心,不管什么网站,都有自己固定的模板,统一的风格,这怎么能满足程序猿的一颗躁动的心?
例如我的个人博客T9’s Developer,欢迎大家访问
那就自己动手,利用各种开源工具,自己搭建一个属于自己的个人博客吧。
下面记录的是自己搭建博客的每个步骤,尽量将所有细节记录下来,为有同样好奇心的小伙伴给个参考
准备
搭建博客,前期需要四个工具
- Hexo:Hexo快速、简洁且高效的博客框架
- Node.js:建立在Chrome上的JavaScript运行引擎
- Git:一款免费、开源的分布式版本控制系统
- GitHub:国内一款面向开发者的云端开发平台,提供代码托管,运行空间,质量控制,项目管理等功能
1. 安装
安装必要的配置环境,如果已经安装过,可以跳过
1.1 安装Git
Git官网
找到Download,安装自己对应的系统版本,系统会自动判定你当前版本,推荐下载,如果没有推荐,那就自己选择吧。
下载成功安装的步骤我就不贴了,1.2 安装Node.js
Node.js 下载地址
同理系统依然会判定你的系统并给出稳定推荐的版本和尝鲜版,两种,供君选择。下载安装步骤同样省略
- 1.3 GitHub账号注册
GitHub账号注册过程很简单,注册流程就省略,完成之后,就开始创建博客了
2.创建个人博客
注册完成之后,点击头像左侧的+
号, —>New repository
,创建新仓库
因为我们创建的是个人网站,所以仓库的名称需要安装GitHub个人网站项目的规定来写。
规则就是:
userName.github.io
比如我的GitHub用户名是dazhaoDai,那我就要填写 dazhaoDai.github.io。然后选择Public
模式,接着点击创建仓库按钮。
创建成功后,进入新仓库,点击Settings,往下找到
选择一个主题,之后一个托管在GitHub上的博客就就搞定了,大概半个小时后,例如我的个人博客:https://dazhaoDai.github.io/
就可以访问了,注意:将其中的用户名换成你创建的仓库名
这时候,你的确可以访问自己博客了,但是我们的博客访问地址是:userName.github.io,是不是一点都不满足?想用自己个性化的域名作为自己的博客地址?
接下来,就需要我们去购买域名,配置成自己个性化的域名地址
域名
购买域名有很多途径,例如阿里云、腾讯云等,这里以阿里云为例。
域名的价格差别比较大,我们是做个个人博客,所以买个便宜的后缀域名,如图所示,价格差别较大
购买域名很简单,但是一定要注意的是,选择的域名后缀一定是可以备案的,不然只能是注册保护,无法使用,在购买时,阿里云会有提示信息:
例如我注册的是 outofmemory.top,具体购买流程就不写了。
解析
购买完成后,选择管理控制台--域名--域名服务--域名列表
,看到你购买的域名,选择解析
参考下图,修改下面信息
分别添加两个A
记录类型,
一个主机记录为www
,代表可以解析 www.outofmemory.top
的域名
另一个为 @
, 代表 outofmemory.top
记录值就是我们的GitHub仓库地址:userName.github.io
,当然我们也可以填写IP地址,使用终端,ping一下:
红框内就是我们仓库的具体IP地址,所以根据自己选择,可以填写userName.github.io
,也可以填写IP地址
这里,我们已经完成了域名解析工作,回到GitHub,完成域名和GitHub Pages 的绑定
绑定
回到Github, 选择我们创建的个人域名仓库,选择Settings
,找到GitHub pages,将我们购买的域名地址填入下方 Custom domain, 然后保存,这时候我们的GitHub pages 和 域名就绑定到一起。
到了这一步,我们已经完成了个人博客的创建,不过你肯定有疑问了,为什么你的博客主题那么个性?别急,下面就来试试
Hexo
Hexo官方文档
前面我们已经安装了Git、Node.js,然后使用npm,安装hexo:
$ npm install -g hexo-cli
安装完毕,我们就需要对自己的仓库进行配置,首先使用Git,将自己的仓库克隆到本地
- 克隆仓库
复制仓库地址,在本地创建一个个人博客的文件夹,例如GitHub_Blog,进入文件夹,使用git命令:
git clone git@github.com:dazhaoDai/dazhaoDai.github.io.git
- 配置Hexo
使用命令行
$ hexo init <替换为当前博客文件夹,例如我的是/Users/dai/Documents/android_dai>
$ cd /Users/dai/Documents/android_dai
$ npm install
新建完成后,指定文件夹的目录如下:
.
├── _config.yml #配置信息
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts #博客内容
└── themes #主题
我们大部分操作都在 _config.yml中,打开 _config.yml,查看信息:
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/# Site
title: T9'S Develop Blog #你博客的标题
subtitle: 不仅有工作,更有生活 #显示在浏览器上搜索的时候显示的标题
description: 喜欢探索未知,保持好奇心 #描述
author: daidai #显示作者
email: daidazhao@gmail.com #邮箱
language: zh-Hans #语言
timezone: Asia/Shanghai #时区# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://outofmemory.top #这个就是填写你的博客地址
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: trueline_number: trueauto_detect: falsetab_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: 10order_by: -date# Category & Tag
default_category: uncategorized
category_map:Android:androidHexo: Blogtag_map:android # 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
theme: hexo-theme-next #GitHub仓库地址
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:type: gitrepo: https://github.com/dazhaoDai/dazhaoDai.github.io.git branch: master
我们要修改的就是有注释的地方:
# Site
title: T9'S Develop Blog #你博客的标题
subtitle: 不仅有工作,更有生活 #显示在浏览器上搜索的时候显示的标题
description: 喜欢探索未知,保持好奇心 #描述
author: daidai #显示作者
email: daidazhao@gmail.com #邮箱
language: zh-Hans #语言
timezone: Asia/Shanghai #时区# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://outofmemory.top #这个就是填写你的博客地址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:#要修改主题,就修改theme
theme: hexo-theme-next #GitHub仓库地址
deploy:type: gitrepo: https://github.com/dazhaoDai/dazhaoDai.github.io.git branch: master
修改CNAME
最后一步,只需要修改 我们github仓库下的 CNAME 文件。
选择 CNAME 文件,使用的注册的域名进行替换,然后提交保存
这时,输入你自己的域名,就可以解析到你的主页了。添加文章
将上面的信息都改为自己的信息,既然配置好了,当然要新写个文章了,进入source/_posts,新建一个Markdown
文件,关于的使用,这里介绍的很详细献给写作者的 Markdown 新手指南,
比如我新建一个 hello.md,内容很简单
保存之后,就需要把添加的博客上传到GitHub了
上传到GitHub
在GitHub_Blog文件下,执行命令(建议每次都按照如下步骤部署):
hexo clean
hexo generate
hexo deploy
搞定!,这时候去浏览器输入你的域名,outofmemory.top是不是成功看到你的博客了?
风格不喜欢?简单,去更换主题,去Hexo查看眼花缭乱的主题
这个主题不错
找到GitHub地址
https://github.com/MOxFIVE/hexo-theme-yelee.git
去前面GitHub_Blog,进入themes,克隆这个主题
cd themes
git clone https://github.com/MOxFIVE/hexo-theme-yelee.git
然后去_config.yml 修改主题,使用仓库名作为主题名
#要修改主题,就修改theme
theme: hexo-theme-yelee
保存,然后将更新重新上传到GitHub
hexo clean
hexo generate
hexo deploy
成功!
TODO
后续将继续介绍如何添加 网站统计
、评论
、标签
、友链
等功能,希望大家继续关注
如何从零开始搭建自己的博客(通俗易懂)相关推荐
- 纯萌新手把手教你从零开始搭建自己的博客
纯萌新手把手教你从零开始搭建自己的博客 欢迎来我的博客看看 方法一:Gridea(推荐) 如果你是真的是像我一样的纯萌新,不是那种谦虚的大佬,那么不用想了,Gridea是你最好的选择. 不如先看看原作 ...
- 如何从零开始搭建自己的博客
作者:T9的第三个三角 出处:http://blog.csdn.net/dazhaodai https://blog.csdn.net/dazhaoDai/article/details/737300 ...
- 从零开始搭建solo个人博客系统
文章目录 1.博客系统的搭建流程 2.服务器选购 2.1阿里云学生主机 2.2普通云主机 3.域名购买与备案(可选) 3.1域名购买 3.2域名服务器备案 3.3域名服务器解析 4.solo安装 4. ...
- 从零开始免费搭建自己的博客(一)——本地搭建hexo框架
本文是博客搭建系列文章第一篇,其他文章链接: 从零开始免费搭建自己的博客(一)--本地搭建 Hexo 框架 从零开始免费搭建自己的博客(二)--基于 GitHub pages 建站 从零开始免费搭 ...
- 从零开始用Docker搭建Halo个人博客
文章目录 从零开始用Docker搭建Halo个人博客 食用指南 一.准备工作:需要云主机 入门级[1核2G+40G云盘].公网IP 带宽[1MB] .域名(需备案) 二.使用SSH工具连接远程主机 三 ...
- 从零开始免费搭建自己的博客(五)——Typora + PicGo + GitHub/Gitee图床
本文是博客搭建系列文章第五篇,其他文章链接: 从零开始免费搭建自己的博客(一)--本地搭建 Hexo 框架 从零开始免费搭建自己的博客(二)--基于 GitHub pages 建站 从零开始免费搭 ...
- 从零开始使用GitHub Pages搭建Hexo静态博客
本文主要讲述如何使用GitHub Pages/Coding/Vercel搭建Hexo静态博客,以及如何使用jsDelivr加速静态资源.如何使用LeanCloud国际版搭载博客评论,和如何使用PicG ...
- 四十四、Hexo搭建自己的博客
最近看了大佬 利用 GitHub 从零开始搭建一个博客文章,解决好久卡在自己的问题,那时看了极客的git课程还是很多问题,找了很多教程,发现都不太全,直到看到 https://mp.weixin.qq ...
- 基于Hexo+GitHub Page搭建免费个人博客教程
1. Hexo 介绍 Hexo 是基于NodeJs的静态博客框架,简单.轻量,其生成的静态网页可以托管在Github和Heroku上. 超快速度 支持Markdown 一键部署 丰富的插件 2. 搭建 ...
最新文章
- Smarty中文手册,Smarty教程,Smarty模板的入门教材
- laravel redis_如何将redis优化
- 廖大python实战项目第三天
- C++中sstream的简单使用
- 小眼睛有多惨?美颜都懒得救你......
- python图像转字符画_python图像处理-字符画风格图片
- Qt 解决 #error This file requires compiler and library support for the ISO C++ 2011 standard
- 项目管理中风险评价的必要性
- 一张图学会python3语法-一张图片在Python操作下的4种玩法(附源码)
- 怎么更改计算机上的限制应用,图文详解通过修改win10系统组策略实现限制指定应用程序的运行-系统操作与应用
-亦是美网络...
- fstab文件详解,mount挂载参数
- linux系统苹果刷机,iPhone上安装Android系统详细步骤
- Java越学越迷茫,应该怎么办?
- java中map和表单字符串相互转换
- 【微信红包封面】哆啦A梦 x GUCCI古驰限定版!!
- 解决mac下adb无法找到手机
- 一次控制文件control file sequential read 等待性能案例分析
- java输出GPA,简单的C GPA计算器问题
- oracle出现101,oracle常见问题(101-200)
- 圣经书||《强化学习导论(2nd)》原书、代码、习题答案、课程视频大全
热门文章
- [游戏技术]L4D1支持L4D2官方地图运行方法
- CrawlSpider爬取拉勾网,解决302问题。
- 2014年3I工作室成员的正式名单
- Unity移动平台下的烘焙使用及优化
- 如何给出Bayesian Estimation模型W的分布?
- 前端js 隐藏手机号或证件号的中间四位
- 异步电动机的机械特性(转速/转矩-电流特性)
- 目前市场上配置独立显卡的计算机是,2021上半年主流中高低配置推荐(大部分支持win7系统)...
- 史上最全的sqlserver运维分析工具,汇总都在这里了,适合sqlserver的dba人员
- 如何使用Windows自带的“diskpart”工具制作系统启动盘