• ArthurSlog
  • SLog-62
  • Year·1
  • Guangzhou·China
  • September 9th 2018

ArthurSlog个人网站上线了~


开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源:

开始编码

  • 继之前的域名购买、服务器购买、域名解析、域名备案完成之后,现在把第一版的网站正式上线
  • 网站地址 www.arthurslog.com
  • 第一版网站,以最少的代码实现:
  1. 网站标题是“个人技术分享”
  2. 背景图一张
  3. 底部根据管局要求,附上了备案号并链接至管局
  4. 前端布局使用到了 calc方法
  5. 后端使用 koa框架 + koa-static 实现了一个简单的web服务器
  • 前后端所有代码已经上传至 v1.0.0Github
  • 当前的文件结构:

ArthurSlog

|
|
-- index.html
-- index.js
-- style.css
-- background.jpg
-- node_modules
-- package.json
-- package-lock.json
--README.md
  • 当前的前端代码index.html、style.css如下:

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ArthurSlog</title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<p>个人技术分享</p>
<footer>
<a href="http://www.miitbeian.gov.cn">粤ICP备18088522号-1</a>
</footer>
</body>
</html>

style.css

body{
background-image:url('background.jpg');
background-repeat:no-repeat;
background-position:50% -10%;
} p{
font-size: 48px;
position: relative;
left: calc(50% - 144px);
} footer {
font-size: .8rem;
position: absolute;
bottom: 10px;
left: calc(50% - 80px);
}
  • 后端服务器代码index.js如下:

index.js

const serve = require('koa-static');
const Koa = require('koa');
const app = new Koa(); // $ GET /package.json
app.use(serve('.')); app.listen(80); console.log('listening on port 80');
  • 配置文件 package.json如下:

package.json

{
"name": "nodeserver",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"koa": "^2.5.2",
"koa-static": "^5.0.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/BlessedChild/ArthurSlog.com.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/BlessedChild/ArthurSlog.com/issues"
},
"homepage": "https://github.com/BlessedChild/ArthurSlog.com#readme"
}
  • 自述文件 README.md如下:

README.md

# This is ArthurSlog.com
  • 另外,其他的文件无需手动修改,不管
  • 至此,完成了第一版网站源码的编写。

欢迎关注我的微信公众号 ArthurSlog

如果你喜欢我的文章 欢迎点赞 留言

谢谢

Slog62_项目上线之ArthurSlog个人网站上线1的更多相关文章

  1. Slog64_项目上线之ArthurSlog个人网站上线3

    ArthurSlog SLog-64 Year·1 Guangzhou·China September 9th 2018 ArthurSlog Page GitHub NPM Package Page ...

  2. Python3 + django2.0 + apache2 + ubuntu14部署网站上线

    自己尝试在本地搭建了 Django 项目后,想部署到自己云服务器上,经常多次尝试和多次踩坑(捂脸),总结如下: 环境:ubuntu14, django2.0, apache2. 1.首先安装需要的库包 ...

  3. http://182.92.241.20/mypro/login 偶的点金项目细化分包管理平台即将上线!!

    http://182.92.241.20/mypro/login            偶的点金项目细化分包管理平台即将上线!! 敬请期待! 项目外包利器 项目管理利器

  4. 喜大普奔,SITE4J网站上线啦

    喜大普奔,SITE4J网站上线啦: 你懂的:https://peterchenhdu.club/

  5. thinkphp5项目--练手--企业单车网站(九)(友情链接)

    thinkphp5项目--练手--企业单车网站(九)(友情链接) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise Webs ...

  6. 项目:git+gitlab+jenkins+ansible上线网站

    项目需求 1. 在gitlab中创建一个项目 nginxinstall2. 编写playbook,实现一键部署nginx.部署一个静态测试页.测试部署结果要求: 部署nginx 端口:83 运行身份: ...

  7. 基于SSM实现的简易员工管理系统(网站上线篇)

    经历无数苦难,好不容易,网站终于上线了.=.=内牛满面ing.chengmingwei.top就是本员工管理系统的主页啦.是的,很简陋,但是毕竟是第一次嘛,所以慢慢来嘛. 如上次所说的(网站简介,见: ...

  8. ECS centos6.8系统下从nginx安装到简单网站上线配置操作的完整记录

    1.准备工作 1.1已购买阿里云云服务器ECS 1.2域名已购买并解析成功 1.3安装有远程链接工具Xshell和文件传输工具Xftf,并链接上ECS实例 2.安装nginx(在Xshell操作) 2 ...

  9. 热烈祝贺达孚电子(NDF)网站上线

    尊敬的客户: 您们好! 为适应公司发展的需要,树立公司的良好形象,满足大家更多的了解电容器系列产品及公司的服务,经过1个多月的筹备,在2019年10月21日公司网站正式上线啦,这标志着NDF(达孚电子 ...

随机推荐

  1. HDU-4553 约会安排(线段树维护连续区间)

    http://acm.hdu.edu.cn/showproblem.php?pid=4553 Problem Description 寒假来了,又到了小明和女神们约会的季节.  小明虽为屌丝级码农,但 ...

  2. day09-正侧表达式

    while True: phone_num = input('please input your phone_num:') if len(phone_num) == 11 \ and phone_nu ...

  3. 路由器协议----IGP、EGP、RIP、OSPF、BGP、MPLS

    1.路由控制的定义 <br>1.1.IP地址与路由控制   file:///var/folders/pz/cy11_lpd5rqfs66s778032580000gn/T/51.html ...

  4. string 转化xml && xml转化为string

    一.使用最原始的javax.xml.parsers,标准的jdk api // 字符串转XML [java] view plaincopyprint? String xmlStr = \". ...

  5. Arcpy处理修改shapefile FeatureClass 线要素坐标

    需求:在开发的webgis系统中需要将道路矢量数据与谷歌地图瓦片叠加,谷歌地图瓦片在国家测绘局的要求是进行了偏移处理的,人称“火星坐标系GCJ_02”,道路数据是WGS-84坐标系下的经纬度坐标,现在 ...

  6. dubbo服务调用

    1.Dubbo的缺省(默认)协议:采用单一长连接和NIO异步通讯. 2.  3.调用关系说明 0. 服务容器负责启动,加载,运行服务提供者. 1. 服务提供者在启动时,向注册中心注册自己提供的服务. ...

  7. python后端面试第六部分:git版本控制--长期维护

    ################## git版本控制 ####################### 1,git常见命令作用 2,某个文件夹中的内容进行版本管理:进入文件夹,右键git bash 3, ...

  8. HTML面试题&知识点汇总

    目录 问题&答案 参考资料 结束语 问题&答案 DOCTYPE作用?标准模式与兼容模式各有什么区别? 声明位于HTML文档中的第一行,处于 html 标签之前.告知浏览器的解析器用什么 ...

  9. JavaScript学习总结(九)事件详解

    转自:http://segmentfault.com/a/1190000002174034 事件处理程序 在DOM中定义了一些事件, 而响应某个事件的函数就叫事件处理程序(或事件侦听器).事件处理程序 ...

  10. 使用记事本编写html代码并运行

    在使用记事本编写html代码,运行时需要将其.txt后缀改为.html双击运行即可. 有时电脑会默认的隐藏其后缀,这时需要修改一下. win7系统修改方法: 双击  我的电脑: 选择  组织: 选择  ...