cms网站内容如何自定义(动态网页中的搭建方案(一)_几种搭建_)
优采云 发布时间: 2021-10-21 16:17cms网站内容如何自定义(动态网页中的搭建方案(一)_几种搭建_)
简介本文文章主要介绍如何搭建个人博客:几种方案对比+个人实现及相关经验技巧,文章字数约2920字,浏览量374,喜欢是9,值得推荐!
几种构建方案 1 第三方平台
在*敏*感*词*、简书、segmentFault、csdn、博客园等。
特点:没有技术壁垒,可以专注于内容。
2 静态网站生成技术
在终端执行命令快速生成静态网站,如Jekyll、Hugo、Hexo等,然后通过Github Pages、Coding等展示。
特点: 通过插件添加评论、搜索、分析等功能。有多种主题可供选择。将文章以特定格式写入本地,放在指定文件夹中。每次发布或修改文章,都需要重新生成和部署网站。
静态 网站 和动态 网站
静态网站 是建立网站的原创方式。查看者看到的每个页面都是一个由站点构建器上传到服务器的 html 文件。每次添加、删除或修改页面时,都必须重新检查服务器的文件。一次下载和上传。
动态网页中的“动态”是指页面的动态生成。动态网页基于数据库技术。当浏览器向服务器请求页面时,服务器根据当前时间、环境参数、数据库操作等动态生成HTML页面,然后发送给浏览器。
3 内容管理系统cms
可以搭建企业级网站,博客只是功能之一。如 Wordpress、Ghost 等。
特点: 后台管理的博客系统。可以在后台管理文章、相册、主题、多用户管理等。需要配置数据库、域名、服务器(收费)。配置完成后,可以在后台界面上实现各种操作。
域名(Domain Name)和网站空间(托管)
通常,要构建动态网站,需要购买域名和网站空间(或主机、服务器)。静态 网站 需要更少的资源,可以在 Github Pages 和 Coding 上免费部署。
有了网站空间,就会有一个ip地址。只要你的服务在主机上运行,其他人就可以通过ip访问你的网站。常见的网站空间购买形式有:共享主机、VPS、云主机和专用主机。
有了域名,你可以给你的ip地址一个人性化的别名,让你访问Google网站而不是216.58.213.164。
4 手写前端
完全从头开始手写页面,原创的可以直接用css+html+javascript编写,也可以使用Vue.js、React.js等SPA框架。然后通过 Github Pages、Coding 等方式展示。
特点:可完全定制,适合前端程序员实践项目。类似于场景2。
5 手写前端+后端
自定义前端页面,自定义后台处理请求方式,以及数据库结构。然后配置域名和服务器。
PHP、NodeJs、Java、Python等后端语言,相关框架有Laravel、Express、Spring Boot、Django等,常用的数据库有MySQL、PostgrcSQL、Redis、MongoDB等。
特点: 可以体验完整的建站流程,迈向全栈。类似于场景3。
利用github问题
问题是指项目上要完成的工作,也可以承担用户反馈的角色。现在很多人使用 Issue 来写博客。
最近在学习React,所以选择使用React.js编写前端代码并部署在Github Pages上,使用Github Issues作为后端,通过Github API完成前后端交互。
因为平时用的是Vue,所以也实现了Vue版本。
1 反应演示 2 vue 演示
3 反应代码 4 Vue 代码
两者的页面样式几乎相同。下面介绍react版本。
项目介绍功能极其简单
页面极小,代码极少。用最精简的代码实现最需要的功能。
定义为您博客的本地预览
git clone git@github.com:kelyu0/react-issue-blog.git
cd react-issue-blog
npm install
npm run start
打开浏览器:3000本地启动。
定制
更改 src/config.js 中的内容并自定义它以成为您的博客(您需要在 github 上有一个有问题的存储库)。
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 生成构建文件夹
部署:
在 Github 上新建一个名为 github.your_username.io 的仓库,将 build 文件夹的内容复制到 github.your_username.io 仓库,并推送到远程。访问 github.your_username.io