您的位置: 首页  >  文章  >  如何从零开始搭建自己的博客

如何从零开始搭建自己的博客

分类: 文章 • 2024-04-12 14:44:02

作者：T9的第三个三角

出处：http://blog.****.net/dazhaodai https://blog.****.net/dazhaoDai/article/details/73730069

序

作为一名合（zhuang）格（bi）的程序猿，经常写点东西，肯定少不了各种网站、博客，通俗的****，文艺的简书，强大的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 [email protected]: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,查看信息：

 

  1. # Hexo Configuration

  2. ## Docs: https://hexo.io/docs/configuration.html

  3. ## Source: https://github.com/hexojs/hexo/

  4.  

  5. # Site

  6. title: T9'S Develop Blog #你博客的标题

  7. subtitle: 不仅有工作，更有生活 #显示在浏览器上搜索的时候显示的标题

  8. description: 喜欢探索未知,保持好奇心 #描述

  9. author: daidai #显示作者

  10. email: [email protected] #邮箱

  11. language: zh-Hans #语言

  12. timezone: Asia/Shanghai #时区

  13.  

  14. # URL

  15. ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'

  16. url: http://outofmemory.top #这个就是填写你的博客地址

  17. root: /

  18. permalink: :year/:month/:day/:title/

  19. permalink_defaults:

  20.  

  21. # Directory

  22. source_dir: source

  23. public_dir: public

  24. tag_dir: tags

  25. archive_dir: archives

  26. category_dir: categories

  27. code_dir: downloads/code

  28. i18n_dir: :lang

  29. skip_render:

  30.  

  31. # Writing

  32. new_post_name: :title.md # File name of new posts

  33. default_layout: post

  34. titlecase: false # Transform title into titlecase

  35. external_link: true # Open external links in new tab

  36. filename_case: 0

  37. render_drafts: false

  38. post_asset_folder: false

  39. relative_link: false

  40. future: true

  41. highlight:

  42. enable: true

  43. line_number: true

  44. auto_detect: false

  45. tab_replace:

  46.  

  47. # Home page setting

  48. # path: Root path for your blogs index page. (default = '')

  49. # per_page: Posts displayed per page. (0 = disable pagination)

  50. # order_by: Posts order. (Order by date descending by default)

  51. index_generator:

  52. path: ''

  53. per_page: 10

  54. order_by: -date

  55.  

  56. # Category & Tag

  57. default_category: uncategorized

  58. category_map:

  59. Android：android

  60. Hexo： Blog

  61.  

  62. tag_map:

  63. android

  64.  

  65. # Date / Time format

  66. ## Hexo uses Moment.js to parse and display date

  67. ## You can customize the date format as defined in

  68. ## http://momentjs.com/docs/#/displaying/format/

  69. date_format: YYYY-MM-DD

  70. time_format: HH:mm:ss

  71.  

  72. # Pagination

  73. ## Set per_page to 0 to disable pagination

  74. per_page: 10

  75. pagination_dir: page

  76.  

  77. # Extensions

  78. ## Plugins: https://hexo.io/plugins/

  79. ## Themes: https://hexo.io/themes/

  80. #要修改主题，就修改theme

  81. theme: hexo-theme-next

  82.  

  83. #GitHub仓库地址

  84. # Deployment

  85. ## Docs: https://hexo.io/docs/deployment.html

  86. deploy:

  87. type: git

  88. repo: https://github.com/dazhaoDai/dazhaoDai.github.io.git

  89. branch: master

  90.  

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

 

  1. # Site

  2. title: T9'S Develop Blog #你博客的标题

  3. subtitle: 不仅有工作，更有生活 #显示在浏览器上搜索的时候显示的标题

  4. description: 喜欢探索未知,保持好奇心 #描述

  5. author: daidai #显示作者

  6. email: [email protected] #邮箱

  7. language: zh-Hans #语言

  8. timezone: Asia/Shanghai #时区

  9.  
  10.  

  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://outofmemory.top #这个就是填写你的博客地址

  14. root: /

  15. permalink: :year/:month/:day/:title/

  16. permalink_defaults:

  17.  
  18.  

  19. #要修改主题，就修改theme

  20. theme: hexo-theme-next

  21.  

  22. #GitHub仓库地址

  23. deploy:

  24. type: git

  25. repo: https://github.com/dazhaoDai/dazhaoDai.github.io.git

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

12

  1. #要修改主题，就修改theme

  2. theme: hexo-theme-yelee

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

hexo clean
hexo generate
hexo deploy

成功！

TODO

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

相关推荐