• 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. dubbo同步/异步调用的方式

    我们知道,Dubbo 缺省协议采用单一长连接,底层实现是 Netty 的 NIO 异步通讯机制:基于这种机制,Dubbo 实现了以下几种调用方式: 同步调用(默认) 异步调用 参数回调 事件通知 同步 ...

  2. 计算机数制与IPv4

    常用计数:十进制数 1010D.二进制 1010B.十六进制1010H 计算机数制: 数制组成=每一位上的数字*该位的值 IPV4地址一共32bit 人使用点分十进制的方式来进行记忆 IPv6地址一共 ...

  3. linux上部署jenkins

    http://www.pianshen.com/article/1133171043/相关jenkins链接 下载jenkins的war包:https://blog.csdn.net/Aaron_Zh ...

  4. id NSObject instanceType 区别

    id 当不确定数组元素类型时,可以选择使用id NSObject和id都可以指向任何对象 NSObject使用时必须强转 instantceType 只能返回和方法所在类相同类型的对象    返回值类 ...

  5. 吴裕雄--天生自然python学习笔记：pandas模块强大的数据处理套件

    用 Python 进行数据分析处理,其中最炫酷的就属 Pa ndas 套件了 . 比如,如果我 们通过 Requests 及 Beautifulsoup 来抓取网页中的表格数据 , 需要进行较复 杂的 ...

  6. C#输入输出及类型转换，变量，常量。

    //输出 Console.WriteLine("大哇塞"); 自动回车的. Console.Write("Hello world");  不带回车的 注意: 1 ...

  7. 用C#实现一个百度万年历

    目录 背景 实现步骤 关键点 结束语 背景 命理学是对人生命运规律的探索,以人的各式各样的数字(出生年月日.姓名笔划等)来推测人的性格与命运并占卜推测未来会发生的事情.古今中外都有相关方面的理论,中国 ...

  8. Java虚拟机内存划分

    Java虚拟机在执行Java程序时,会把它管理的内存划分为若干个不同的数据区.这些区域有不同的特性,起不同的作用.它们有各自的创建时间,销毁时间.有的区域随着进程的启动而创建,随着进程结束而销毁,有的 ...

  9. OpenGL 保存bmp图像

    今天我们先简单介绍Windows中常用的BMP文件格式,然后讲OpenGL的像素操作.虽然看起来内容可能有点多,但实际只有少量几个知识点,如果读者对诸如”显示BMP图象”等内容比较感兴趣的话,可能不知 ...

  10. OpenCV 特征点检测

    #include <stdio.h> #include <iostream> #include "opencv2/core/core.hpp" #inclu ...