搭建一个自己的博客

本文面向无基础学生。

博客为静态博客,无需费用。

使用的工具和框架:
GitHub Pages + hexo

为什么要搭建个人博客

  • 将自己的思考和学习经历记录下来作为一个知识沉淀的平台
  • 在搭建博客和升级博客的过程中学习技术
  • 展示你自己,并且可以作为他人了解你的渠道
  • 成为社区的一份子,帮助到他人。博客中记录的bug和经历可以让更多的人少走弯路。

优秀的个人博客推荐:

使用GitHub page + hexo快速搭建

环境准备

安装Node.jsGit并注册GitHub

安装成功检验:

在命令行执行下列命令:

1
2
3
4
5
6
$ git --version
git version 2.9.0.windows.1
$ node --version
v10.15.3
$ npm --version
6.4.1

安装Hexo

在命令行执行下列命令:

1
$ npm install -g hexo-cli	# -g 代表着全局安装

完成后建立你的个人博客:

1
2
3
$ hexo init blogName
$ cd blogName
$ npm install

博客文件夹的目录如下:

1
2
3
4
5
6
7
8
9
10
├───.git
├───scaffolds # 博客的模板文件夹
├───source # 资源文件夹
│ └───_posts # 你的博客源文件(.md)
└───themes # 主题文件夹
└───landscape # 默认主题
├───.gitignore
├───.gitmodules
├───_config.yml # 博客的配置文件
├───package.json # 项目管理文件

创建你的第一篇博文

新建一篇博文:

1
$ hexo new '文章标题'

/source/_posts文件夹下找到你的博文,使用Markdown编辑器打开并编辑。

推荐使用Typora进行编辑。
Markdown Guide或者菜鸟教程学习Markdown语法。

保存后运行:

1
2
$ hexo generate # 生成静态文件,可简写为 hexo g
$ hexo server # 启动服务器。默认情况下,访问网址为:`http://localhost:4000/`。可以简写为 hexo s

此时已经可以在public文件夹下看到完整的静态文件。
在浏览器中输入http://localhost:4000/就可以看到预览效果了。

部署到GitHub Pages

  1. 在GitHub创建一个名为username.github.io的新仓库,其中username是您在GitHub上的用户名(或组织名称)。
    ! 如果仓库的第一部分与您的用户名不完全匹配,则它将不起作用,因此请确保正确无误。

  2. 转到要存储项目的文件夹,然后克隆新的仓库:

    1
    $ git clone https://github.com/username/username.github.io
  3. 将之前生成的public文件夹下的文件拷贝到本地仓库中。再运行:

    1
    2
    3
    $ git add --all
    $ git commit -m "Initial commit"
    $ git push -u origin master
  4. 等待一段时间你就可以启动浏览器并转到https://username.github.io你就可以看到自己的博客啦!

// 将博客部署到GitHub还有其他方法,比如可以使用hexo deploy。这个就请自行学习探索啦。

了解并丰富你的博客

以下是一些进阶网站:

进阶博客搭建

想必很多同学在完成简单的静态博客搭建后都想尝试更加绚丽,互动性和自定义更强的博客。
首先你需要购买一个域名,拥有一个服务器。
使用WordPress可以快速搭建一个动态博客。
如果你不仅仅满足于使用框架和平台,那么你可能需要去了解并学习一些更加深入的东西,前端可以用Vue或者React,后端用python的Django,Flask框架实现快速开发个人博客。