cms网站内容如何自定义(动态网页中的搭建方案(一)_几种搭建_)

优采云 发布时间: 2021-10-21 16:17

  cms网站内容如何自定义(动态网页中的搭建方案(一)_几种搭建_)

  简介本文文章主要介绍如何搭建个人博客:几种方案对比+个人实现及相关经验技巧,文章字数约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

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线