乐趣区

关于前端:如何搭建个人博客ReactVue-Github-Issue-Github-Pages-极简个人博客

jiezi

几种搭建计划

1 第三方平台

在现有的博客网站、论坛或社区上注册个人主页。如知乎，掘金，简书，segmentFault，csdn，博客园等。

特点：无技术门槛，可专一于内容。

2 动态网站生成技术

在终端执行命令疾速生成动态网站，如 Jekyll、Hugo、Hexo 等。而后通过 Github Pages、Coding 等展现。

特点：通过插件可减少评论、搜寻、剖析等性能。有多种主题可选。在本地以特定格局书写文章，搁置在指定的文件夹。每次公布或修改文章都须要从新生成和部署网站。

动态网站和动静网站

动态网站是最后的建站形式，浏览者所看到的每个页面是建站者上传到服务器上的一个 html 文件，每减少、删除、批改一个页面，都必须从新对服务器的文件进行一次下载上传。

动静网页中的“动静”是指页面的动静生成。动静网页以数据库技术为根底，当浏览器申请服务器的某个页面时，服务器依据以后工夫、环境参数、数据库操作等动静的生成 HTML 页面，而后再发送给浏览器。

3 内容管理系统 CMS

可搭建企业级网站，博客只是性能之一。如 WordPress，Ghost 等。

特点：带有后盾治理的博客零碎。在后盾能够治理文章、相册、主题，多用户治理等。须要配置数据库、域名、服务器（免费）。一次配置完即能够在后盾界面实现各种操作。

域名 (Domain Name) 和网站空间 (Hosting)

通常搭建动静网站须要购买域名和网站空间（或称主机、服务器）。动态网站所需资源较少，在 Github Pages、Coding 上能够收费部署。

有了网站空间就有了 ip 地址，只有主机上你的服务在运行，他人就能够通过 ip 拜访到你的网站。常见的网站空间购买模式有：共享主机，VPS，云托管和专用主机。

有了域名就能够给 ip 地址一个人性化的别名，容许你用 google.com 而非 216.58.213.164 来拜访谷歌网站。

4 手写前端

从无到有齐全手写页面，原始的能够间接写 css + html + javascript，或者用 SPA 框架如 Vue.js，React.js。而后通过 Github Pages、Coding 等展现。

特点：能够齐全自定义，适宜作为前端程序员的练手我的项目。与计划 2 相似。

5 手写前端 + 后端

自定义前端页面，自定义后盾解决申请形式、数据库构造。而后配置域名、服务器。

后端语言如 PHP、NodeJs、Java、Python，相干框架有 Laravel、Express、Spring Boot、Django 等。数据库罕用的有 MySQL、PostgrcSQL、Redis、MongoDB 等。

特点：能够体验残缺的建站流程，迈向全栈之路。与计划 3 相似。

利用 github issues

Issue 指的是我的项目待实现的工作，也可承当用户反馈的作用。当初有许多人也利用 Issue 写博客。

  • 易使用易保护，不须要域名、服务器、数据库。只须要写前端页面，用 issues 进行后盾治理。甚至能够不写前端页面，间接展现 issues 作为博客。
  • 自带评论和珍藏零碎，读者的反馈能够激励作者继续创作。

本人最近在学 React，所以抉择了用 React.js 写前端代码并部署在 Github Pages，利用 Github Issues 做为后盾，通过 Github API 实现前后端交互。

因为平时用的是 Vue，所以也实现了 Vue 版本。

1 react-demo 2 vue-demo
3 react-code 4 vue-code

二者页面款式简直雷同。以下介绍 react 版本。

我的项目介绍

性能

  • 代码高亮
  • 响应式
  • 文章锚点导航
  • 回到顶部
  • 评论跳转

极简

页面极简，代码极简。用最精简的代码，实现最须要的性能。

  • 3 个页面：Issue list, Issue content, About
  • 5 个文件：Posts.js, Post.js, PostContent.js, About.js, Catalog.js

定义成你的博客

本地预览

git clone git@github.com:kelyu0/react-issue-blog.git
cd react-issue-blog
npm install 
npm run start

浏览器关上 http://localhost:3000 即可本地启动。

自定义

更改 src/config.js 中的内容，自定义成为你的博客（须要在 github 上有一个带 issues 的 repository）。

export const config = {
  // Your Github UserName
  githubUserName: "kelyu0",
  // Your Github Repo Name Where You Have your issues as Blog
  githubRepo: "articles",
  // About Page links
  thirdPartySite: [
    {
      href: "https://github.com/kelyu0",
      title: "GitHub",
    },
    //Other sites ...
  ],
};

构建和部署

构建：

npm run build 生成 build 文件夹

部署：

  1. 在 Github 上新建一个名为 github.your_username.io 的仓库
  2. 将 build 文件夹之中的内容拷贝到 github.your_username.io 仓库下，推送到近程。
  3. 拜访 github.your_username.io
退出移动版