如何制作博客(这里面还有这样的秘密)
如何制作博客(这里面还有这样的秘密)
其实先简单说一下网页是怎么形成的。那么，网页就是网站的基本元素，是承载各种网站应用的平台。一般来说，你的网站是由网页组成的。如果你只有域名和虚拟主机，不做任何网页，你的客户还是无法访问你的网站。
网页是包含HTML标签的纯文本文件，可以存储在世界某个角落的计算机中。它是万维网中的一个“页面”，采用超文本标记语言格式(标准通用标记语言的一种应用，具有文件扩展名。html或。htm)。网页通常使用图像文件来提供图片。网页应该通过网络浏览器阅读。
今天，让我们制作一个简短的个人博客页面。这个页面制作很简单，代码也很简单。HTML代码主要用来制作软件。推荐威震，比较方便。所以，现在让我们开始制作我们的个人网页。
第一步是确定网页的主题和布局。然后我们的布局很简单，包括主题区、导航框、字幕、评论区、日期区等等。
首先做个标题。这个标题很简单。你可以看看这个源代码：
个人博客
app开发入门
第二步，制作设计导航栏。导航对网站来说很重要，如果访问者很难找到他们需要的信息，他们就不会留在网站上，所以他们必须有导航栏。
源代码：
最新文档
选定的文档
技术援助
联系我们
移动前端开发之viewport的深入理解
萧发表于
2015年10月1日下午2:39
“除非另有说明，否则这篇博文是原创的。请大家一起转载、传阅、交流~”
要在移动设备上重建或开发网页，首先要了解的是移动设备上的viewport。只有理解视口的概念和使用与视口相关的元标签，我们的网页才能适应或响应不同分辨率的移动设备。
一般来说，移动设备上的视口是设备屏幕上可以用来显示我们网页的区域。具体来说，它是浏览器(或应用程序中的webview)用于显示网页的部分。但是，视口不限于浏览器可视区域的大小，可视区域可以大于或小于浏览器的可视区域。默认情况下，一般来说，移动设备上的视口大于浏览器的可视区域。这是因为考虑到移动设备的分辨率与台式计算机相比相对较小，为了在移动设备上正常显示那些为台式浏览器设计的传统网站，移动设备上的浏览器会将其默认视口设置为980px或1024px(或其他值，这由设备本身决定)，但结果是浏览器将具有水平滚动条，因为浏览器可视区域的宽度小于默认视口的宽度。下图列出了某些设备上浏览器的默认视口宽度。
14条评论.
并且为其添加CSS样式：
p, li { line-height: 20px; }
#page_header { width: 100%; }
#page_header > nav > ul, #page_footer > nav > ul {
list-style: none;
margin: 0;
padding: 0;
}
#page_header > nav > ul > li, #page_footer nav > ul > li {
margin: 0 20px 0 0;
padding: 0;
display: inline;
}
第三步，为其设计尾部，我们将会使用footer元素，用来作为文档或区段定义尾部信息，这就意味着即使在博文中也能使用footer元素了。
源代码：
归档
October 2015
September 2015
August 2015
July 2015
June 2015
May 2015
April 2015
March 2015
February 2015
January 2015
更多
Copyright ? 2015 APP开发.
主页
关于
团队
隐私
最后添加样式以及浮边栏
#posts {
float: left;
width: 74%;
}
#posts aside {
float: right;
font-size: 20px;
line-height: 40px;
margin-left: 5%;
width: 35%;
}
#sidebar {
float: left;
width: 25%;
}
#page_footer {
clear: both;
display: block;
text-align: center;
width: 100%;
小编结语：对于设计一个个人博客网页并不难，所以只要跟着我们一步步来，那么就很容易做出来了，希望大家能够好好学，能够做出属于自己的个人博客出来，感谢大家的支持。
本文共5220个字，预计阅读时间需要17分钟。所有文字摘自互联网，仅做配图处理。
首先制作一个网站需要：
①域名即example.com
②虚拟空间或云服务器
③网站代码制作工具或网站后台管理工具（你可以百度出模板）
④一定的编程技能和代码理解能力（优秀的网站制作者需要了解PHP、JavaScript、CSS、HTML、SQL、Markdown等知识）
域名是一个网站的入口与标识，域名需要购买
一般从阿里云（万网）、腾讯云、京东云、Godaddy等网站购买。
域名需要自己想一个好的名称，一旦选中变不可更改。建议大家购买顶级域名为.com、.cn结尾的域名，这些域名在国际上常见，便于网站站在国际高度上。当然你也可以标新立异购买其他顶级域名。比如小米为了购买mi.com域名便花了2000万人民币，饿了吗域名比较奇特为elem.me看是不是很厉害。
域名在中国是需要备案的，在阿里云腾讯云买的域名必须通过工信部备案。
备案流程如下：
备案一般在购买域名的地方进行，阿里云会自动帮你向工信部提交。一般说来，备案的要求特别严，平均下来备案两次才可能被工信部通过，这期间大约花费两到三周。
备案过程中会让你打印《个人网站承诺书》并拍照上传，为了验证你的身份还需要录制个人视频眨眼，当然你的个人信息精确到地址。（估计到时候抓人的时候方便，舆论控制、思想钳制）
如果你不想备案的话，建议不要从国内的大公司购买域名，从大陆境外购买（香港、台湾也可以）
如果你不备案的话如果被网警查到你的网站就要被封或者只能用VPN访问喽。（还是备案吧！！！）
在工信部备案完成后如果你是一个大企业或公司或需要正式的网站，那么建议你还得去公安局备案，即到你网站信息填入的地址处所在地的公安局进行公安备案。（个人网站就不需要了）
虚拟空间是云服务器分出来的一小部分空间，用来存放你的网站数据。
购买域名后他们可能会给你免费提供一个虚拟空间，也可以购买，或者使用第三方虚拟空间。现以域名omegaxyz.com为例,把域名www. omegaxyz.com以及omegaxyz.com解析到虚拟主机上(假设虚拟主机的IP地址为21X.5.7X.1XX),解析完成后,将可以用www. omegaxyz.com以及omegaxyz.com来访问网站,当然(解析完成后,还得在虚拟主机上绑定才会生效,本站的虚拟主机完全具备域名自主绑定功能)。
首先请进入域名管理。。
首先来解析www.omegaxyz.com到IP: 21X.5.7X.1XX。 点击”增添主机记录”,然后在弹出的框内输入”www”,注意,不能输入”www.omegaxyz.com”。
按”确定”,然后输入IP地址: 21X.5.7X.1XX。
再按”确定”,该解析就完成了,该解析实时生效,大大方便了客户管理。
一般而言,用户除了用带www的网址www. omegaxyz.com来访问网站外,还喜欢用不带www的omegaxyz.com来访问,下面我们来把omegaxyz.com解析到IP: 21X.5.7X.1XX,还是点击”增添主机记录”,将出现下图所示,此时不必输入任何字符,直接点击”确定”。(不输入字符代表域名omegaxyz.com本身)
点击确定后又出现IP地址输入框,输入IP: 21X.5.7X.1XX,然后按确定。
按确定后,该解析也完成了。
如图：
第三方虚拟空间推荐七牛云，这部分请大家自己学习
注：DNS解析和域名解析类似，到控制台界面会有提示，这里不在赘述。
简称ECS（elastic cloud servicer）
云服务器的业内名称其实叫做计算单元。所谓计算单元，就是说这个服务器只能算是一个人的大脑，相当于普通电脑的CPU，里面的资源都是有限的。你要获得更好的性能，解决办法一是升级云服务器，二是将其它耗费计算单元资源的软件部署在对应的云服务上。例如数据库有专门的云数据库服务、静态网页和图片有专门的文件存储服务。
当然用云服务器来存储网页是有点大材小用了，但是能使网站性能更好，且能加载更多子域名的网站如jiaotong.omegaxyz.com。最重要的是如果你想制作APP的话，云服务器是最好的选择了。唯一的缺点就是贵（找找优惠政策）。
在购买云服务器是一定要注意云服务器的系统和环境（阿里云是基于Linux的Centos系统，Java和PHP环境等），这些在第三部分会细讲。
如果你只想制作一个简单的页面，用来宣传一些简单的思想或者是新手试水，那么使用Dreamweaver可视化编辑即可制作一个简单的页面，百度搜索一些简单的模板，即可更改。
此处就看你的编程能力了哦。
如果你想制作一个包含多个文件的网站，那么就需要使用一些管理工具了，这里以个人博客为例讲解。
①HEXO(静态)
hexo是一款基于Node.js的静态博客框架, hexo github链接 ,这篇教程是针对与Mac的，参考链接，由于原文讲到的hexo是以前的老版本，所以现在的版本配置的时候会有些改动。
配置环境
安装Node（必须）
作用：用来生成静态页面的
到Node.js官网下载相应平台的最新版本，一路安装即可。
安装Git（必须）
作用：把本地的hexo内容提交到github上去.
安装Xcode就自带有Git，我就不多说了。
申请GitHub（必须）
作用：是用来做博客的远程创库、域名、服务器之类的，怎么与本地hexo建立连接等下讲。
github账号我也不再啰嗦了,没有的话直接申请就行了，跟一般的注册账号差不多，SSH Keys，看你自己了，可以不配制，不配置的话以后每次对自己的博客有改动提交的时候就要手动输入账号密码，配置了就不需要了，怎么配置我就不多说了，网上有很多教程。
正式安装Hexo
Node和Git都安装好后,首先创建一个文件夹,如blog,用户存放hexo的配置文件,然后进入blog里安装Hexo。
执行如下命令安装Hexo：
初始化然后，执行init命令初始化hexo,命令：
好啦，至此，全部安装工作已经完成！blog就是你的博客根目录，所有的操作都在里面进行。
生成静态页面
本地启动
启动本地服务，进行文章预览调试，命令：
浏览器输入http://localhost:4000
配置Github
建立Repository
建立与你用户名对应的仓库，仓库名必须为【your_user_name.github.io】，固定写法=
然后建立关联，我的blog在本地/Users/leopard/blog，blog是我之前建的东西也全在这里面，有：
_config.yml node_modules public source
db.json package.json scaffolds themes
现在我们需要_config.yml文件，来建立关联，命令：
翻到最下面，改成我这样子的
然后执行命令：
然后，执行配置命令：
然后再浏览器中输入http://leopardpan.github.io/就行了，我的github的账户叫leopardpan,把这个改成你github的账户名就行了
部署步骤
每次部署的步骤，可按以下三步来进行。
一些常用命令：
②wordpress（动态）
WordPress是一款个人博客系统，并逐步演化成一款内容管理系统软件，它是使用PHP语言和MySQL数据库开发的。用户可以在支持 PHP 和 MySQL数据库的服务器上使用自己的博客。
WordPress有许多第三方开发的免费模板，安装方式简单易用。不过要做一个自己的模板，则需要你有一定的专业知识。比如你至少要懂的标准通用标记语言下的一个应用HTML代码、CSS、PHP等相关知识。
WordPress官方支持中文版，同时有爱好者开发的第三方中文语言包，如wopus中文语言包。WordPress拥有成千上万个各式插件和不计其数的主题模板样式。
下面讲解如何在阿里云云服务器上安装wordpress
服务器环境要求
PHP 5.2.4或更新版本
MySQL 5.0或更新版本
Apache或Nginx
利用shell登录自己的云服务器
Xshell界面
首先要创建一个数据库
接下来添加虚拟主机
剩余部分请进入完整博文omegaxyz网站制作
更多内容访问 omegaxyz.com
网站所有代码采用Apache 2.0授权
网站文章采用知识共享许可协议BY-NC-SA4.0授权
? 2020-2025 ? OmegaXYZ-版权所有 转载请注明出处