Slog62_項目上線之ArthurSlog我的網站上線1

時間 2019-12-08

標籤 slog62 slog 項目上線 arthurslog 我的網站欄目網站開發简体版

原文原文鏈接

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

ArthurSlog我的網站上線了～css

開發環境MacOS(High Sierra 10.13.5)

須要的信息和信息源：

開始編碼

繼以前的域名購買、服務器購買、域名解析、域名備案完成以後，如今把初版的網站正式上線
網站地址 www.arthurslog.com
初版網站，以最少的代碼實現：

網站標題是「我的技術分享」
背景圖一張
底部根據管局要求，附上了備案號並連接至管局
前端佈局使用到了 calc方法
後端使用 koa框架 + koa-static 實現了一個簡單的web服務器

先後端全部代碼已經上傳至 v1.0.0Github
當前的文件結構：

ArthurSloghtml

|
|
 -- 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.cssnode

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.jsgit

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.jsongithub

{
  "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"
}