• 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. i春秋web作业2.25

    Web安全工程师(入门班) [全国线上入门班53期]课后作业   2020-2-25 DorinXL   请思考:XXE漏洞的原理的是什么?有哪些危害? XXE漏洞全称XML External Ent ...

  2. Linux基础篇七：Linux的命令执行

    首选区分内置命令和外置命令: 内置命令:shell程序自带的命令,系统内核一启动就可以使用的命令 外置命令:在系统PATH变量路径下的命令 如何查看一个命令是内置命令还是外置命令: type -a c ...

  3. facebook第三方登陆（使用sharedSDK）无法加载网址：这个URL的域名未包含应用的域名

    http://bbs.mob.com/forum.php?mod=viewthread&tid=8134&extra=page%3D1

  4. 电脑C盘空间不足

    电脑C盘空间不足,又不知道哪些文件可以删,可以下载下面的批处理文件 @echo off echo 正在清除系统垃圾文件,请稍等...... del /f /s /q %systemdrive%\*.t ...

  5. php测试使用小的mysql存储过程

    <?php //前提是php.ini里面要开通mysqli的扩展./*$link = mysqli_connect('localhost','root','','chinatupai');  $ ...

  6. 在mysql中生成数据库和数据表

    #创建数据库CREATE DATABASE s4day65 DEFAULT CHARSET utf8; #班级表 CREATE TABLE class (id INT NOT NULL AUTO_IN ...

  7. 科技报告|AD报告|DTIC|PB报告|STAR|ERA|NTIS|DTIC|DOE|EPA|NASA |JPL|

    信息检索-科技报告是灰色文献获取渠道有限. 技术论文中因保密需要,会删除关键性技术. AD报告也产生较早,1951年开始出版.现由美国国防技术情报中心(DTIC:Defence Technical I ...

  8. 在CMD中操作mysql数据库出现中文乱码解决方案

    百度了一下..有说将cmd字符编码用chcp命令改为65001(utf8字符编码),可这样之后根本无法输入中文,查询出的中问结果依旧乱码 其实,只要保证cmd客户端和MySQL两者编码一致即可. 但现 ...

  9. 每天一点Linux-01文档系统

    Windows: 以多根的方式组织文档 C: D: E:Linux: 以单根的方式组织文档 / /目录结构: FSH (Filesystem Hierarchy Standard) [root@yan ...

  10. Android开发之《安全防护》

    逆向 java混淆 so加固 网络传输安全