如何从零开始搭建自己的博客(通俗易懂)

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

作为一名合(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.创建个人博客

20181010180805.png

注册完成之后,点击头像左侧的+号, —>New repository,创建新仓库

因为我们创建的是个人网站,所以仓库的名称需要安装GitHub个人网站项目的规定来写。
规则就是:

userName.github.io

比如我的GitHub用户名是dazhaoDai,那我就要填写 dazhaoDai.github.io。然后选择Public模式,接着点击创建仓库按钮。

image.png
image.png

创建成功后,进入新仓库,点击Settings,往下找到

选择一个主题,之后一个托管在GitHub上的博客就就搞定了,大概半个小时后,例如我的个人博客:https://dazhaoDai.github.io/就可以访问了,注意:将其中的用户名换成你创建的仓库名

这时候,你的确可以访问自己博客了,但是我们的博客访问地址是:userName.github.io,是不是一点都不满足?想用自己个性化的域名作为自己的博客地址?

接下来,就需要我们去购买域名,配置成自己个性化的域名地址

域名

image.png
image.png

购买域名有很多途径,例如阿里云腾讯云等,这里以阿里云为例。
域名的价格差别比较大,我们是做个个人博客,所以买个便宜的后缀域名,如图所示,价格差别较大

购买域名很简单,但是一定要注意的是,选择的域名后缀一定是可以备案的,不然只能是注册保护,无法使用,在购买时,阿里云会有提示信息:

例如我注册的是 outofmemory.top,具体购买流程就不写了。

解析

image.png

购买完成后,选择管理控制台--域名--域名服务--域名列表,看到你购买的域名,选择解析

参考下图,修改下面信息
分别添加两个A记录类型,

一个主机记录为www,代表可以解析 www.outofmemory.top的域名
另一个为 @, 代表 outofmemory.top
记录值就是我们的GitHub仓库地址:userName.github.io,当然我们也可以填写IP地址,使用终端,ping一下:

image.png


红框内就是我们仓库的具体IP地址,所以根据自己选择,可以填写userName.github.io,也可以填写IP地址

image.png

这里,我们已经完成了域名解析工作,回到GitHub,完成域名和GitHub Pages 的绑定

绑定

image.png

回到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/ # Sitetitle: 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: # 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:         Android:android         Hexo: Blog        tag_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-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/#要修改主题,就修改themetheme: hexo-theme-next      #GitHub仓库地址# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:  type: git  repo: https://github.com/dazhaoDai/dazhaoDai.github.io.git    branch: master 

我们要修改的就是有注释的地方:

# Sitetitle: 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:  #要修改主题,就修改themetheme: hexo-theme-next      #GitHub仓库地址deploy:  type: git  repo: https://github.com/dazhaoDai/dazhaoDai.github.io.git   branch: master
  • 修改CNAME
    最后一步,只需要修改 我们github仓库下的 CNAME 文件。
    选择 CNAME 文件,使用的注册的域名进行替换,然后提交保存

    这时,输入你自己的域名,就可以解析到你的主页了。
  • 添加文章
    将上面的信息都改为自己的信息,既然配置好了,当然要新写个文章了,进入source/_posts,新建一个Markdown文件,关于的使用,这里介绍的很详细献给写作者的 Markdown 新手指南
image.png

比如我新建一个 hello.md,内容很简单

保存之后,就需要把添加的博客上传到GitHub了

上传到GitHub

在GitHub_Blog文件下,执行命令(建议每次都按照如下步骤部署):

hexo clean
hexo generate
hexo deploy

image.png

搞定!,这时候去浏览器输入你的域名,outofmemory.top是不是成功看到你的博客了?

风格不喜欢?简单,去更换主题,去Hexo查看眼花缭乱的主题

image.png

这个主题不错

找到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 修改主题,使用仓库名作为主题名

12#要修改主题,就修改themetheme: hexo-theme-yelee  

保存,然后将更新重新上传到GitHub

hexo clean
hexo generate
hexo deploy

成功!

TODO

后续将继续介绍如何添加 网站统计评论标签友链等功能,希望大家继续关注

点这里可以跳转到人工智能网站