• 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. 46）PHP，PHP语言为啥需要服务器

    1)用户的 Web 浏览器发出 HTTP 请求,请求特定 Web 页面. 2)Web服务器收到.php 的请求获取该文件,并将它传到 PHP 引擎,要求它处理. 3)PHP 引擎开始解析脚本. 脚本中 ...

  2. C - The Battle of Chibi HDU - 5542 (树状数组+离散化)

    Cao Cao made up a big army and was going to invade the whole South China. Yu Zhou was worried about ...

  3. jsp读取后台数据乱码

    jsp读取后台数据乱码,如图所示: tomcat编码格式与项目不一致,找到config/server.xml修改为UTF-8 <Connector URIEncoding="UTF-8 ...

  4. Fiddler发送post请求 出现503

  5. asp.net 管道处理模式

  6. 3dmax2018卸载/安装失败/如何彻底卸载清除干净3dmax2018注册表和文件的方法

    3dmax2018提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dmax2018失败提示3dmax2018安装未完成,某些产品无法安装,也有时候想重新安装3 ...

  7. JAVA中String类以及常量池和常用方法

    一.String类的定义 String类特点:String 代表字符串.java程序中所有的字符串文字(例如:"abc")都被实现为String类的子类 String类特点:长度不 ...

  8. Welcome to Fan Ouyang’s website!

    Welcome to Fan Ouyang's website! 欧阳璠,哲学博士,湖南娄底人. 目前为浙江大学教育学院课程与学习科学系教育技术专业百人计划研究员. 2013-2018年 明尼苏达大学 ...

  9. 如何创建Hexo站点的Tags和Categories默认页面

    安装Hexo的categories生成插件 1 $ npm install hexo-generator-category --save 安装Hexo的Tags生成插件 1 $ npm install ...

  10. string删除与查找erase，find

    s.erase( 指针位置 , 删除长度 ) 返回值修改后的string对象引用 find(string, int):第一个参数用来指示要查找的字符,第二个参数用来表示从字符串的何处开始查找子串(默认 ...