退休后，时间都是自己的，可以随心所欲干自己喜欢的事。夕阳西下，尚余一抹残红，生命不息折腾不止，活到老学到老，在学习中寻找乐趣，以消磨漫长的退休时光。一直有一个想法，自己建一个个人网站，把平时写的杂文、游记和一些旅游风景照片保存到网上，方便查阅和分享。2002年曾经尝试搞了一个非常简单的个人网站托管上网，后来因工作太忙没有继续完善，最后不了了之。现在有的是时间，不妨付诸行动。我们老年人不比年轻人，缺乏网络基础知识，更加没有写代码的本事，只能通过在互联网搜索有关教程，边学习边动手。下面结合我的实践，摘要谈谈如何自己动手搭建一个简单的个人网站（仅供像我一样没什么网络基础知识的老人参考，年轻人及高手就没必要浪费时间看了）。
一、首先，最省事的一个办法，就是下载一个主页制作模板，在模板上根据自己的喜好进行魔改。我在https://html5up.net这个外国免费共享主页模板上，选择下载了一个自认为还不错的主页模板，解压后得出以下一堆文件夹和文件：
其中，assets文件夹内存放网页css、js代码文件、数据库、网页字体文件等；images是图片文件夹，用来存放网页图片；index.html是主页；LICENSE.txt是版权许可文件；README.txt是自述文件。自己新建两个文件夹,分别命名为 html、video，用于存放建站用的网页文件、视频文件。
二、下载安装一个MarkdownPad软件（网上有免费版），用MarkdownPad打开刚才下载的index.html文件，显示如下原始代码（相关代码表达的意义有不明白的自己百度搜索，在此略过）：
<!DOCTYPE HTML>
<!--
Prologue by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Prologue by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Header -->
<div id="header">
<div class="top">
<!-- Logo -->
<div id="logo">
<span class="image avatar48"><img src="images/avatar.jpg" alt="" /></span>
<h1 id="title">Jane Doe</h1>
<p>Hyperspace Engineer</p>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#top" id="top-link"><span class="icon solid fa-home">Intro</span></a></li>
<li><a href="#portfolio" id="portfolio-link"><span class="icon solid fa-th">Portfolio</span></a></li>
<li><a href="#about" id="about-link"><span class="icon solid fa-user">About Me</span></a></li>
<li><a href="#contact" id="contact-link"><span class="icon solid fa-envelope">Contact</span></a></li>
</ul>
</nav>
</div>
<div class="bottom">
<!-- Social Icons -->
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
<li><a href="#" class="icon brands fa-dribbble"><span class="label">Dribbble</span></a></li>
<li><a href="#" class="icon solid fa-envelope"><span class="label">Email</span></a></li>
</ul>
</div>
</div>
<!-- Main -->
<div id="main">
<!-- Intro -->
<section id="top" class="one dark cover">
<div class="container">
<header>
<h2 class="alt">Hi! I'm <strong>Prologue</strong>, a <a href="http://html5up.net/license">free</a> responsive<br />
site template designed by <a href="http://html5up.net">HTML5 UP</a>.</h2>
<p>Ligula scelerisque justo sem accumsan diam quis<br />
vitae natoque dictum sollicitudin elementum.</p>
</header>
<footer>
<a href="#portfolio" class="button scrolly">Magna Aliquam</a>
</footer>
</div>
</section>
<!-- Portfolio -->
<section id="portfolio" class="two">
<div class="container">
<header>
<h2>Portfolio</h2>
</header>
<p>Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis
egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus.
Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis
fusce hendrerit lacus ridiculus.</p>
<div class="row">
<div class="col-4 col-12-mobile">
<article class="item">
<a href="#" class="image fit"><img src="images/pic02.jpg" alt="" /></a>
<header>
<h3>Ipsum Feugiat</h3>
</header>
</article>
<article class="item">
<a href="#" class="image fit"><img src="images/pic03.jpg" alt="" /></a>
<header>
<h3>Rhoncus Semper</h3>
</header>
</article>
</div>
<div class="col-4 col-12-mobile">
<article class="item">
<a href="#" class="image fit"><img src="images/pic04.jpg" alt="" /></a>
<header>
<h3>Magna Nullam</h3>
</header>
</article>
<article class="item">
<a href="#" class="image fit"><img src="images/pic05.jpg" alt="" /></a>
<header>
<h3>Natoque Vitae</h3>
</header>
</article>
</div>
<div class="col-4 col-12-mobile">
<article class="item">
<a href="#" class="image fit"><img src="images/pic06.jpg" alt="" /></a>
<header>
<h3>Dolor Penatibus</h3>
</header>
</article>
<article class="item">
<a href="#" class="image fit"><img src="images/pic07.jpg" alt="" /></a>
<header>
<h3>Orci Convallis</h3>
</header>
</article>
</div>
</div>
</div>
</section>
<!-- About Me -->
<section id="about" class="three">
<div class="container">
<header>
<h2>About Me</h2>
</header>
<a href="#" class="image featured"><img src="images/pic08.jpg" alt="" /></a>
<p>Tincidunt eu elit diam magnis pretium accumsan etiam id urna. Ridiculus
ultricies curae quis et rhoncus velit. Lobortis elementum aliquet nec vitae
laoreet eget cubilia quam non etiam odio tincidunt montes. Elementum sem
parturient nulla quam placerat viverra mauris non cum elit tempus ullamcorper
dolor. Libero rutrum ut lacinia donec curae mus vel quisque sociis nec
ornare iaculis.</p>
</div>
</section>
<!-- Contact -->
<section id="contact" class="four">
<div class="container">
<header>
<h2>Contact</h2>
</header>
<p>Elementum sem parturient nulla quam placerat viverra
mauris non cum elit tempus ullamcorper dolor. Libero rutrum ut lacinia
donec curae mus. Eleifend id porttitor ac ultricies lobortis sem nunc
orci ridiculus faucibus a consectetur. Porttitor curae mauris urna mi dolor.</p>
<form method="post" action="#">
<div class="row">
<div class="col-6 col-12-mobile"><input type="text" name="name" placeholder="Name" /></div>
<div class="col-6 col-12-mobile"><input type="text" name="email" placeholder="Email" /></div>
<div class="col-12">
<textarea name="message" placeholder="Message"></textarea>
</div>
<div class="col-12">
<input type="submit" value="Send Message" />
</div>
</div>
</form>
</div>
</section>
</div>
<!-- Footer -->
<div id="footer">
<!-- Copyright -->
<ul class="copyright">
<li>© Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
三、我们要做的，就是根据自己的需要及总体网页设计构想，对以上模板代码进行修改、替换成自己想要的，如网页主题、各个链接地址、网页图片、联系方式的文字图标及链接、主页标题及文字内容、各板块布局及预计要链接的地址等，需要自己慢慢摸索和测试，在此不再赘述。修改好后保存并覆盖原来的主页文件。本人修改后的主页在浏览器打开的效果（点击打开链接）→→ http://www.seal32.cn/
四、用 MarkdownPad 写文章，可以插入图片、视频、链接等，保存为.md 文件，再导出为.html文件，放在html文件夹内。为方便预览目录，可建一个文档总目录网页，例如essay.html，各文章标题链接到相应的.html文件即可。MarkdownPad 设置中可根据需要自定义格式表，具体使用方法可参考有关教程。
五、网站托管。一开始，我是在 github.com 免费极客网站注册了一个账号，建了个项目仓库github.seal32.io，将上述所有模板文件及网页文件上传到该仓库根目录下托管，日常管理以 GIT 方式上传下载文件。该网站服务器是在国外的，众所周知的原因，网页打开速度慢，有时连接不上。好处是不用域名备案，没那么多限制。
因此，我在腾讯云购买了一个轻量云应用服务器，2G内存、40G存储、4M带宽、300G流量/月，初次购买费用是45元/年；然后注册了一个域名 www.seal32.cn 费用 89元/3年，经实名认证，绑定服务器的公网IP地址，进行域名解析。因为服务器在国内，按规定还要在工信部进行域名备案（服务器在国外的不用备案）。程序比较麻烦，不过好在所有提交材料都是电子化，在电脑及手机操作即可完成。备案申请一般需要7个工作日，通过后，可获得工信部颁发的ICP网络许可证书，将其标注及链接在主页底部。这还没完，ICP备案通过后30天内还要上互联网安全管理服务平台进行公安备案，取得许可证书后将其链接在主页底部。如果怕麻烦，购买服务器时可以选择腾讯云在香港的服务器，这样就不需要备案。
登录服务器的远程桌面，在服务器浏览器中搜索下载安装“宝塔面板”，注册、登录，按教程进行设置，输入服务器的公网IP、密码，由宝塔面板软件自动运行配置服务器的网络环境，在服务器根目录下生成了一个文件夹：c:/wwwroot/www.seal32.cn，将自己已经搭建好的网站文件夹及文件全部拷到该文件夹内。
当然，你也可以下载安装 WordPress 等软件 直接在软件中搭建自己的个人博客网站。
六、在本地电脑登录管理远程服务器并上传下载文件：
1、开始-附件-远程桌面连接打开对话框。
2、在“远程桌面连接”对话框中，输入轻量应用服务器公网 IP 地址，单击选项。
3、在常规页签中，输入轻量应用服务器公网 IP 地址×××.×××.×××.××和用户名Administrator。
4、选择本地资源页签，单击详细信息。
5、在弹出的“本地设备和资源”窗口中，选择驱动器，勾选需要上传到轻量应用服务器的文件所在的本地硬盘，单击确定。
6、本地配置完成后，保存配置（以后在远程桌面快捷方式中打开窗口点击连接即可），单击连接，远程登录轻量应用服务器。
7、在 Windows 轻量应用服务器中，单击这台电脑，即可以看到挂载到轻量应用服务器上的本地硬盘。
8、双击打开已挂载的本地硬盘，并将需要拷贝的本地文件复制到 Windows 轻量应用服务器的硬盘中，即完成文件上传操作。（也可将服务器的文件反向复制到本地硬盘）
七、用手机登录管理远程服务器并上传下载文件：
下载安卓版微软远程桌面Remote Desktop，添加一个远程桌面，按提示输入服务器公网IP地址及密码，最重要的是在选项中要勾选允许读取手机储存和剪贴板，连接后即可用手机远程登录云服务器，进行手机与服务器之间各种文件复制粘贴等操作。
至此，你已经拥有了属于自己的简单个人网站，剩下的就是撰写文章，增加内容，需要时发表分享。你也可以新建一个私人文件夹，将不想发表的照片、文档等存放在该文件夹只供你查看。其实，愚以为，个人网站有没有人看都无所谓，能够拥有自己的一小块网上地盘，自娱自乐也挺开心的……。