유쾌한 개인 페이지 만들기 - P1: 소개 및 즉각적인 만족

14251 단어 html surge matthewcalecom tutorial

소개

안녕하세요.나의 연습에 오신 것을 환영하며, 어떻게 사람을 즐겁게 하는 개인 페이지를 만드는지 이해해 주십시오.이 시리즈에서 당신은 귀여운 홈페이지를 읽고 신속하게 구축할 수 있습니다. 즉,💯 실행할 때 의존성이 없습니다.💯 Node에서 작성한 현대적이고 우아한 개발 도구를 즐겨 개발합니다.js.
저희가 제작할 페이지는 제 개인 페이지http://matthewcale.com의 복제입니다.NPM 스크립트(기본 작업 실행용), Pug, (HTML용), Stylus, (CSS용), Gulp (고급 작업 실행용) 및 Surge (호스팅용) 등 유용한 도구를 사용할 것입니다.우리는 이 도구를 사용하여 읽기 쉽고 개발하기 쉽고 간단하게 배치할 수 있는 사이트를 만들 것입니다. CSS*나 Javascript 라이브러리가 필요하지 않습니다. 이것은 그 발자취가 매우 작고 개발에 필요한 인지 부하량이 적다는 것을 의미합니다.
내가 이 글을 쓴 것은 모든 기능급 개발자들이 이해할 수 있도록 하기 위해서이며, 더 높은 개발자들에게는 지루하지 않다.만약 일이 뚜렷하게 명확하지 않거나 지루하다면 나에게 알려 주세요.나는 모두를 기쁘게 할 수는 없지만, 독자가 무엇을 원하는지 이해하는 것이 나에게 매우 중요하다.정말 감사합니다.

말도 마, 왜 이러는 거야?

이 강좌를 만드는 원인에 관심이 있을 때만 읽을 수 있습니다.
개발자로서 우리의 임무는 어떻게 많은 일을 하는지 아는 것이다. 이런 일들은 왕왕 매우 복잡하고 엄격한 구조가 필요하다.대규모 프로젝트가 최종 소비자 수와 활발한 개발자 수를 쉽게 확장할 수 있도록 이런 강성이 필요하다.
프레임워크의 존재로 인해 이런 강성과 샘플 파일은 얄밉지 않고 이해하기 쉽기 때문에 개발자들은 이런 프레임워크를 사용하여 수동으로 강성 구조를 굴리는 부담을 줄인다.Bootstrap이 좋은 예입니다.많은 개발팀은 자신의 CSS 구성 요소를 작성하지 않기 위해 Bootstrap (또는 다른 유사한 CSS 라이브러리) 를 사용합니다.이것은 좋은 생각이다!사용자와 (표) 상호작용을 하고 (대시보드) 에서 정보를 소비하는 일반적인 페이지는 예상된 형식을 따르며, 이러한 예상된 형식을 더욱 쉽게 만들 수 있도록 유도한다.
그러나 인터넷에는 또 다른 유형의 페이지가 존재한다. CSS 프레임워크는 그 자체와 같은 유용성 때문에 역할을 발휘하지 못한다. 이것이 바로 맞춤형'예쁘다'또는'예술'페이지이다.오해하지 마세요. 이런 프레임워크도 보통 이 페이지를 만들 수 있고 그 프레임워크의 베테랑 사용자에게 자신의 장점을 제공할 수 있지만 이 목적을 위해 작성한 것이 아닙니다.따라서 이 페이지를 만드는 데 사용할 수 있지만 프레임워크로 하여금 흔히 볼 수 있는 문제를 처리하고 인류로 하여금 예술적인 페이지를 만드는 문제를 처리하게 하여 더욱 자연스러움을 느끼게 하는 것을 발견했다.이것이 바로 이 페이지들의 본질, 작은 예술품 장치이다.
그래서 제가 시작한 것은 제가 프레임이 없는 귀여운 페이지를 얼마나 쉽고 즐겁게 만들 수 있는지 보는 것입니다.
저는 일부 개발 도구의 도움으로 귀여움을 주요 목표로 하는 페이지를 만드는 것이 매우 즐거울 수 있다는 것을 발견했습니다. 저는 여러분과 저의 방법을 공유하고 싶습니다.

즉시 만족

우선, 우리 온라인으로 아주 멋진 페이지를 찾아보자!이 페이지는 우리의 최종 제품은 아니지만, 우리가 사용하고자 하는 세 가지 기술을 익히기 시작하는 좋은 장소이며, 당신에게 쉽게 계속 구축할 수 있는 프로젝트 설정을 제공할 것입니다.그러니까 쫓아가자!

필요한 도구

노드.js 설치됨

기본 코드 편집기(예: Atom, VSCode 또는 Sublime

터미널 프로그램(예: 터미널 또는 iTerm)

설치 확인

# In your terminal
matt.cale$ node --version
v12.16.3
matt.cale$ npm --version
6.14.4

프로젝트 설정 단계

프로젝트 디렉터리 만들기

# In your terminal
# Idea: Use "jane-doe" instead of "dale-gribble" in your command 
mkdir ~/Desktop/dale-gribble.com

프로젝트 초기화

# In your terminal
# Idea: Use "jane-doe" instead of "dale-gribble" in your command 
cd ~/Desktop/dale-gribble.com && npm init -y

참고 명령 npm init -y 은 패키지를 생성합니다.Node와 NPM(노드 의존항 관리 도구)은 프로젝트를 노드 모듈에 필요한 json 파일로 간주하여 개발자에게만 적용되는 의존항을 설치할 수 있습니다.

설치 파도.sh 개발자 의존

# In your terminal
npm i --save-dev surge

주의:'개발자 의존 관계'는 코드 라이브러리나 프로그램/응용 프로그램으로 다른 라이브러리나 응용 프로그램을 만드는 것을 더욱 쉽게 합니다.

웹 사이트 컨텐츠 만들기 절차

이제 우리는 해독할 수 있는 항목이 하나 생겼으니 해독을 시작합시다!잠시 후 우리는 파그를 사용할 것이다.js는 더욱 우아하고 모듈화되며 확장 가능한 태그를 만들지만, 지금은 HTML만 수정하면 제대로 된 것을 배치할 수 있습니다.

dist라는 디렉터리 만들기

# In your terminal
mkdir dist

중요 알림: 이것은 우리가 정적 사이트로 배치한 디렉터리입니다.

색인을 만듭니다.html 파일

# In your terminal
touch dist/index.html

도 HTML 템플릿을 작성합니다.

<!-- In your dist/index.html file -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style></style>
    <!-- CSS font link here! -->
    <title>Dale Gribble</title>
</head>
<body>
    <!-- Content here! -->
</body>
</html>

획득🆒 Google Fonts 에서 글꼴을 입력하고 head 섹션에 스타일시트로 배치합니다.이것은 정규적이고 굵으며 사체 버전을 얻을 수 있는 좋은 생각이다.내 거야.

<!-- In your dist/index.html file -->
<!-- In between the <head> tags -->
<link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">

이제 HTML 프레임워크를 구축하여 첫 번째 사용자 정의 내용을 추가합니다.이제 페이지에 모든 HTML을 추가할 수 있지만 계속 따르는 경우 다음 형식을 사용합니다.

이름(link

식별자(Dale Gribble

환영 메시지(Exterminator, Treasure Hunter, Alientologist

If you're from the CIA you have to tell me! 👽에 다음을 추가합니다.

<!-- In your dist/index.html file -->
<!-- In between the <body> tags -->
<div class="row">
    <div class="column hero">
        <div class="welcome-info">
            <h1>Dale Gribble</h1>
            <h2>Exterminator, Treasure Hunter, Alientologist 👽</h2>
            <p>If you're from the CIA you have to tell me!</p>
        </div>
    </div>
</div>

저희가 제공할 내용은 Flexbox를 사용하여 스타일 디자인을 할 것입니다. Flexbox는 일반적인 CSS에서 사용할 수 있는 스타일 디자인 도구입니다.이 스타일을 이해하기 쉽도록 UI를 행과 열로 나눕니다.때때로 우리는 여러 열이 있지만, 이런 상황에서 우리는 단지 한 줄과 한 열만 필요로 한다.이 열은 우리의 내용을 포함하는 항목 body 을 포함할 것이다.
브라우저에서 보니까 심심한데, 응?그럼 저희가 공개하기 전에 스타일링을 추가해서 꾸며보도록 하겠습니다.
색인welcome-info 부분의 style 표시 사이.html 복제는 다음과 같습니다.

/* In your dist/index.html file */
/* In between the <style> tags */
body {
    font-family:'Cabin', sans-serif;
}

h1 {
    font-size: 2.5rem;
}
.row {
    display: flex;
    justify-content: center;
}

.column {
    display: flex;
}

.hero {
    align-items: center;
    height: 100vh;
}

.welcome-info {
    text-align: center;
}

.welcome-info .sugar {
    font-style: italic;
}

이 양식들은 매우 간단하지만, 그럼에도 불구하고, 만약 당신이 어떤 내용을 이해하지 못한다면, 걱정하지 마세요. 저는 뒷부분에서 이 양식들을 더욱 상세하게 소개할 것입니다.
색인을 계속 엽니다.브라우저의 html 파일은 인터넷 (글꼴) 에 연결되면 다음과 같은 내용을 볼 수 있습니다.

만약 당신의 것이 내 것 같지 않다면, 거리/색인을 보십시오.html, 그곳의 모든 것이 똑같은지 봅시다.만약 당신이 검사를 했다면, 모든 것이 마찬가지입니다. 저에게 평론을 남기거나 문제를 만들어 주십시오.

사이트를 인터넷에 배포하려면

다행이네요. 무섭지 않아 보이는 사이트가 있어요!그것은 또한 너에 대한 대량의 정보를 제공했지만, 다른 사람이 볼 수 없다면, 그렇지 않으면 이것은 쓸모가 없다. 그렇지?
그럼 저희가 이걸 어떻게 얻을까요?💣 사이트가 온라인으로 배포됩니까?전에 다운로드 head 했을 때 기억나세요?이제 우리 얘 써야 돼!
Surge는 매우 간단한 정적 사이트 관리 플랫폼입니다.우선, 우리는 NPM 스크립트를 만들 것입니다. 이 스크립트는 우리가 다운로드한 surge 프로그램을 호출합니다.
NPM 스크립트는 surge 호출된 명령을 사용하고 패키지의 항목을 참조합니다.json 파일의 npm run <script> 부분입니다.셸의 명령을 사용합니다(예: Bash).예시 스크립트는 다음과 같습니다.

"scripts": {
  "say-hi": "echo hello there"
}

호출 시 다음 내용을 출력합니다.

# In your terminal
npm run say-hi
> echo hello there
hello there

NPM은 scripts 디렉터리 surge 에서 프로그램을 호출할 수 있습니다.node_modules 작업에 필요한 것은 색인을 포함하는 디렉터리일 뿐입니다.html(dist for us), 같은 디렉터리에 CNAME라는 파일입니다. 이 파일은 당신이 원하는 급증 주소와 계정 (이메일과 비밀번호) 을 포함합니다.가장 좋은 것은 그것이 공짜라는 것이다.
그러면 배치 과정을 만듭니다.

dist 디렉터리에 CNAME라는 파일을 만듭니다. (이 파일은.html이나.txt 같은 확장자가 없습니다.

# In your terminal
touch dist/CNAME

CNAME 파일을 열고 필요한 surge 사이트 이름을 추가합니다.이것은 내 CNAME 파일의 내용입니다.

dale-gribble.surge.sh

프로젝트 구조는 다음과 같습니다.

dist
dist/index.html
dist/CNAME
node_modules
package-lock.json
package.json

패키지에 배치 스크립트를 만듭니다.json 스크립트.이것은 내가 소포한 surge 부분이다.json 파일.

"scripts": {
  "test": "echo \"nothing to test\"",
  "deploy": "surge dist"
},

이제 이륙해야 돼요.🚀! <site-name>.surge.sh NPM 스크립트를 실행합니다.

# In your terminal
npm run deploy

주의: 처음 달리기를 할 때 전자 우편 비밀번호를 입력하라고 알려 줍니다.
내 출력은 다음과 같습니다.

Running as <matt> (Student)

project: dist
domain: dale-gribble.surge.sh
upload: [====================] 100% eta: 0.0s (2 files, 1178 bytes)
CDN: [====================] 100%
IP: <IP>

Success! - Published to dale-gribble.surge.sh

현재 브라우저에서 당신의 scripts을 탐색하고 당신의 걸작을 보십시오!
내 거야!

와!우리는 단지 많이 했을 뿐이다!우리는 사이트를 만들었고 이를 양식화했으며 CNAME (networky) 파일을 만들었고 배치 스크립트를 만들었으며 사이트를 인터넷에 발표했다.우선 우리가 한 모든 것을 즐긴 후에 계속합시다. 우리는 Pug와 다른 NPM 스크립트를 사용하여 우리의 표지를 더욱 아름답고 확장할 것입니다!
관심 가져주셔서 감사합니다.나는 이것이 재미있고 교육적 의의가 있기를 바란다.만약 당신이 어떤 피드백이 있거나 단지 "안녕하세요"라고 말하고 싶다면, 아래에 나에게 한 줄을 써 주세요.즐거운 하루 되세요.🤠
* 글꼴에 대해서는 구글 글꼴을 사용하지만, 이것은 완전히 선택할 수 있으며, 적당한 반품은 사용할 수 있다.

Reference

이 문제에 관하여(유쾌한 개인 페이지 만들기 - P1: 소개 및 즉각적인 만족), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mattcale/making-a-delightful-personal-page-p1-introduction-and-instant-gratification-57in

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[js 없음] Laravel에서 확인란을 선택하지 않은 경우 기본값 사용(false)

현대 CSS의 멋진 사용자 정의 목록 스타일 사용하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다