웹사이트 제작, 배포하기

getbootstrap.com

• documentation - componets
• 이미 만들어진 button, progress 등 디자인의 코드를 가져올 수 있는 사이트
• css따로 꾸며줄 필요 x
• home - previous release 들어가서 4.5version의 css연결 코드를 내가 만든 css파일 연결코드 바로 윗줄에 넣어준다, js연결 코드는 body끝나는 태그 바로 위에 넣어준다. -> 이제 부트스트랩 코드들 사용 가능
• 검색으로 문법도 찾아볼 수 있음

live server 를 이용하면 가상서버를 이용해서 우리가 만든 웹에 접속할 수 있도록 해준다

• vscode - extention - liveserver 설치
• html페이지에서 마우스 우클릭 - open with live server 클릭

pixabay.com

• 무료 이미지 사이트

Deploy 배포하기 : netlify.com

• 웬만한 트래픽 까지는 무료로 사용 가능한 사이트
• signup - 상단 sites - 내가 만든 코드들이 담겨있는 폴더를 화면에 업로드(deploy완료) - 상단에 주소로 들어가면 인터넷에 올라온 내 사이트 확인가능 - (site settings-change site name)들어가서 사이트 주소 변경 가능

Sns 공유기능 만들기 : addthis.com

• 회원가입 - share bottons - 원하는 tool type선택 - inline선택 후 activate tool클릭 - 그러면 화면에 script태그가 뜨는데, 복사해서 닫는 body태그 위에 넣는다 - 그리고 inline코드는 공유기능을 넣고싶은 곳에 넣어준다 (완료)
• 상단에 tools를 들어가면 내가 만든 공유기능의 세팅을 설정 변경 해줄 수 있다

광고 붙이는 방법
1. 애드네트워크 이용하기
2. 직접 광고 계약하기

애드 네트워크

• 광고를 하길 원하는 회사들한테 광고를 받아서, 서비스를 만드는 사람들이 요청할경우 그 광고를 보내준다. (google adsense, kakao adfit) 광고를 직접 계약하지 않아도 쉽게 광고를 붙일 수 있고, 통계도 제공해준다.

광고붙이기 : adfit.kakao.com

• 로그인 - 광고관리 - 광고관리 - 새매체(매체 고유값에는 netlify에서 만들어준 사이트주소를 넣어준다) - 광고단위등록 - 완료후 나오는 코드를 광고를 넣고싶은 html파일 위치에 넣어준다 - 완성된 사이트 코드를 netlify(deploys탭)에 다시 업로드해준다 - html에서 광고 코드 부분을 <article></article>로 묶어주면 css로 꾸며줄 수도 있다.
  -> html코드를 수정하면 꼭 다시 netlify에 재업로드 해준다

직접 광고 계약하기

• 내가 만든 사이트가 실검에 오르거나 유명해지면 광고업체에서 컨택이 옴(사이트에 개발자 연락처를 남겨놔야한다)

네이버 검색에 내 사이트 나오게하기 : searchadviser.naver.com

• 상단 웹마스터 도구 클릭 - 로그인 - 사이트 등록 - 사이트 소유 확인 - 왼쪽 사이트바에 검증 - robots.txt 간단생성 - 생성된 robots파일을 내가만든 사이트코드 폴더에 넣어준다 - 구글에 sitemap generator를 검색한 후 아무 사이트나 들어가 .xml파일을 만들어준다 (xml-sitemaps.com이용 - 중앙에 내가 만든 사이트주소 입력 - start버튼 클릭 - 완료 후 view sitemap details 클릭 - download your xml 클릭) - 생성된 .xml파일도 내가 만든 사이트 코드 폴더에 함께 넣어준다 - 다시 netlify에 업로드 - 다시 네이버 웹마스터 사이트로 돌아와서 수집요청 클릭 - 왼쪽사이드바에 요청탭 클릭 - 사이트맵 제출 클릭 - URL입력에 sitemap.xml입력하고 확인버튼

검색엔진최적화 : SEO(Search Engine Optimization)

• seo가 잘 되어있을 수록 키워드 검색에 따라 네이버 상단에 위치되어있다.
  e.g) '테스트'라는 키워드를 네이버에 검색했을 때 상단에 뜰 수록 seo가 잘 된 사이트라고 할 수 있다
  • 내부 요소 최적화 - HTML, 내부의 컨텐츠, 메타테그 등을 최적화
  • 외부 요소 최적화 - 백링크(내 사이트를 다른 사이트에서 링크를 거는 것) 개수와 백링크를 건 사이트의 신뢰도가 얼마나 있는지
• searchadviser.naver.com 접속 - 진단하기 클릭(내 사이트가 얼마나 seo가 잘 되어 있는지 확인할 수 있음) - 스크롤해서 사이트 간단 체크에 내 사이트 url 입력 - 돋보기 두번 누르면 결과 확인 가능 - 여기서 필요한 항목을 가이드를 눌러서 확인해보고 하나씩 최적화하면 된다