这两周陆陆续续花了一些时间把新公司的官网重新弄了一下，包括从域名注册、解析、工信部备案、公安备案全过程，还包括搭建了简单版的静态官网，顺带着以个人名义注册了域名，也跑下了全流程，记录一下，供同行者借鉴参考。
Step 1：域名注册
Step1.1 域名注册
是最简单的步骤，公司域名之前已经注册过，但很久没用且没有查到备案记录，于是就重新备案，可直接查看Step2。
本次注册个人域名，hidevops.cn，使用腾讯云的服务，可以在控制台中搜索“域名注册”，进入后，先搜索拟使用的域名看是否已经被他人注册，如下图所示：
一般来说，.com的域名基本上都已经被他人注册了，性价比较高的推荐.cn域名，目前费用是29元每年。
注1：如果你要使用域名，还要付域名解析费用，可选择打包费用，比单独购买会便宜一些，我当时加上域名解析共40多元；
Step1.2 域名解析
注2：域名注册成功后，可添加解析项后，就可以进行域名访问了，最基础的域名解析配置见下图，配置www和@两条记录，即解析www.<domain-name>和<domain-name>。
Step1.2 域名实名认证
工信部2017年全面实行域名实名认证，如果未通过则域名会暂停解析，所以虽然现在可以访问了，但只是暂时性的。
实名认证分为个人与企业，个人要填写的信息很简单，身份证相关信息即可，企业就需要营业执照或组织机构代码证等，信息填写并没有太多门槛，填写及拍照上传即可。
注1：域名刚注册完成后，不能直接进行实名认证，需要72小时后才可提交实名认证申请，所以一个域名真正启用最好留足一个星期。
Step 2：域名工信部备案
步骤1完成后，域名可以访问了，但还是临时性的，如果不及时去工信部备案，那么域名在30天后会无法解析。
目前阿里云、腾讯云都不提供免费备案，即需要在云服务商购买单独的备案授权码，或在云服务商处购买3个月以上的云服务器（可以是ECS或轻量级）。
之前趁打折时在腾讯云买过一年的轻量级服务器，所以个人域名的解析没有问题；而公司域名在阿里云上，之前的ECS都已经过期了，于是花最小代价买了2C4G的轻量级服务器，以便进行备案。
按照备案要求填写信息，上传个人的身份证或企业营业执照等相关信息，提交后即进入审核流程，具体注意事项见下：
注1：工信部备案审核过程中，需要将域名解析终止，即域名保持没有解析的状态，待审核通过后再打开；
注2：在备案审核过程中，都会有云服务商的审核环节，即先需要通过云服务商的备案审核，这个环节更多的是审核上传材料的清晰度和完整性，一般不会有问题；
注3：工信部域名审核时，会有电话打来进行确认，记得在审核申请提交的两天内接听电话，因为号*会码**跟一些骚扰电话有些类似，所以记得不要拒接，不然又要重新提交，会延长1~2天；
注4：初审通过后，会发短信要求你去备案网站进行备案信息确认，个人的话只会有一条，而如果是企业，网站负责人和公司负责人是两个人的话，就会给两个人都发短信，要求在24小时内进行网站验证，具体验证网站在短信中也有，beian.miit.gov.cn。
注5：备案通过后，可在腾讯云或阿里云上找到备案号，并将其代码复制到网站页面的最下面，以展示备案号。
Step 3：域名公安备案
工信部备案完成后，还需在30日内完成公安备案，感觉这是几个步骤中最复杂的，还好完成工信部备案后就可以先使用了，同步进行就好。
上beian.gov.cn网站，第一次使用要进行新用户注册，然后遵循以下步骤：
Step3.1 开办主体管理，登记网站的开办主体性质，个人或企业，除了身份证信息或营业执照信息外，要拍摄一张手持身份证的照片并上传；
Step3.2 新办网站申请，要填写网站信息、工信部备案号、域名、域名证书、IP地址等，以及网络接入服务商和域名注册服务商信息。
域名证书可从云服务商的“域名”服务中找到并*载下**，网络接入服务商和域名注册服务商信息同样可以从云服务商的备案指南中找到，想偷懒的同学可参考如下图片：
腾讯云公安备案指南：https://cloud.tencent.com/document/product/243/19142
阿里云公安备案指南：https://help.aliyun.com/document_detail/36981.html
Step3.3 提交网站申请后，就等各地公安网安人员进行审核了，注意他们会访问域名来看网站内容情况，跟工信部备案审核相反，这时必须把域名解析打开，网站可访问。
注：我一开始用nginx安装后的默认页面，在页面底部加上工信部的备案号，结果显示审核不通过，于是花了半天做了一个静态页面的官网，重新提交审核申请，这才通过。
所以最后一步就是如何用半天时间完成一个简单的网站。
Step 4：静态官网制作
为了快速完成静态网站制作，所以服务器肯定选择最常用的Nginx，网上选了一个开源的模版，Stylish Portfolio，链接为https://github.com/BlackrockDigital/startbootstrap-stylish-portfolio/archive/gh-pages.zip。
解压缩到本地后，可以发现一个index.html文件和三个目录assets、css和js，js没有调整，主要修改内容在主页、assets和css。
Step 4.1，修改assets，最简网站准备用几张介绍图片，而图片的来源就是公司介绍的PPT，具体做法为：（1）选择3~4页大图片、少文字的PPT页面，最好有首页和尾页，作为素材；（2）将其转化成PDF（可以使用Word或WPS），因为PDF可以保证排版格式的准确性；（3）使用PDF工具将其输出为图片，jpg和png均可；（4）将图片按顺序排好，放入assets目录。
Step 4.2，修改css，可以发现首页就是通过这段css代码来配置样式并加载背景图的：
.masthead {
min-height: 30rem;
position: relative;
display: table;
width: 100%;
height: auto;
padding-top: 8rem;
padding-bottom: 8rem;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../assets/img/bg-masthead.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.masthead h1, .masthead .h1 {
font-size: 4rem;
margin: 0;
padding: 0;
}
@media (min-width: 992px) {
.masthead {
height: 100vh;
}
.masthead h1, .masthead .h1 {
font-size: 5.5rem;
}
}
为了简化，后面每页都复制此段代码，仅更改名称，如masthead改为about、service等等，并替换background属性中的url，如此即完成了各页面css的修改。
Step 4.3，修改index.html首页代码，
1、原页面中从首页往下是各个组块，功能不同，而为了简化，除首页外，其余组块全部删除，除将首页的head改为section之外，其余均复制首页内容。
<!-- Header-->
<header class="masthead d-flex align-items-bottom">
<div class="container px-4 px-lg-5 text-center">
<a class="btn btn-primary btn-xl" href="#page-title">显示更多</a>
</div>
</header>
<!-- pageTitle-->
<section class="pageTitle d-flex align-items-bottom" id="page-title">
<div class="container px-4 px-lg-5 text-center">
<a class="btn btn-primary btn-xl" href="#page-about">显示更多</a>
</div>
</section>
每个section要调整的主要包括两处：（1）align-items-center改为align-items-bottom，这样按钮从页面中间位置改为中间朝上，不会遮挡核心内容；（2）注意<section>标签中的id，需要取不同的值，并在<a>标签中的href进行配置，即实现按一下按钮跳下一个页面。
2、修改导航栏的代码，将其中的href替换为每个Section的id
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><a href="#page-top">官网</a></li>
<li class="sidebar-nav-item"><a href="#page-top">首页</a></li>
<li class="sidebar-nav-item"><a href="#page-title">定位</a></li>
<li class="sidebar-nav-item"><a href="#page-about">我们</a></li>
<li class="sidebar-nav-item"><a href="#page-service">服务</a></li>
<li class="sidebar-nav-item"><a href="#page-frame">模型</a></li>
<li class="sidebar-nav-item"><a href="#page-end">合作</a></li>
</ul>
Step 4.4，完成网站修改，上传到nginx目录下面，即可生效。
以上就是最简官网搭建的概要步骤，如果有小伙伴做同样的事情，可以参考一二，如有谬误还请指出，有疑问也可留言：）