여러분의 포트폴리오를 gif 애니메이션으로 해, 일람할 수 있는 사이트 만든【Flask로 정적 사이트】

7751 단어 HTML파이썬github-pages포트폴리오스크래핑
자신도 포트폴리오 사이트 만들까, 레이아웃의 참고로 GitHub의 #portfolio-website 를 보고 있었습니다만, 왠지 효율이 나쁘기 때문에, 스크레이핑 해 gif에 정리했습니다. 약 5000건의 포트폴리오를 gif로 볼 수 있습니다. 다시 한번 여러분의 기량과 열량 스게라고 생각했습니다.
htps : //포rt후오오후 b. 우미히. 코/

특히 디자인 뛰어난 것을 픽업하고, 여기에서 소개하고 있습니다.
htps : // 코 m / 우미 히코 / ms / b12 03d073405 a 00b94 e

참가는 리포지토리에 URL과 해시 태그 #portfolio-website를 붙여 넣을 뿐. 며칠 이내에 크롤링 해줍니다. 계속 주워지지 않으면 issue하십시오.



월일이 지나고 현재는 PortfolioHub로 리뉴얼했습니다. Flask는 사용하지 않습니다.

이런 식으로, 톱의 스타수, 포크 건수, 업데이트 순서로 회람할 수 있습니다. gif이므로 아래까지의 스크롤과 애니메이션도 감각이 잡힌다고 생각합니다. 여러분이, 수많은 디자인을 참고로 하고 싶을 때에 편리하다고 생각하므로, 사용해 주시면 다행입니다.

일본인 포트폴리오는 이 검색에서는 꽤 없기 때문에, #portfolio-website가 유행하면 좋다고 생각합니다. 게재 증가 → 회람 건수 증가의 흐름으로 하고 싶기 때문에, 좋다고 생각해 주신 분 부디 스타 부탁합니다.

진짜는 건수가 많은 #portfolio 도 크롤링하고 싶습니다만, 스킬 세트·경력 이외의 의미의 포트폴리오도 다수 거론해 버리므로, 단념했습니다.

이번 기술 포인트는, Github pages의 정적 페이지 묶음에 대해서, 이번과 같은 정기적으로 집계되어 소트되는 동적으로 본래 하고 싶은 동작의 변환, 그것을 python·Flask를 사용할 수 있다면 학습 비용이 없다 Frozen-Flask의 소개입니다. 이하 샘플 스크립트의 소개입니다.

명령줄
pip install Flask
pip install Frozen-Flask
python test.py

폴더 구성
qiita
│  test.py
├─files (test.py実行後)
│      filename_one.html (test.py実行後)
│      filename_two.html (test.py実行後)
└─templates
        test_dynamic.html

test.py
from flask import Flask, render_template
from flask_frozen import Freezer

app = Flask(__name__)
data = {
    'filename_one.html': 'value_one!',
    'filename_two.html': 'value_two!'
}

@app.route('/<path>/')
def dynamic_index(path):
    value = data[path]
    return render_template('./test_dynamic.html', value=value)

def generate_static_files(dynamic_paths):
    freezer = Freezer(app)
    app.config['FREEZER_RELATIVE_URLS'] = True
    app.config['FREEZER_DESTINATION'] = '../qiita/files'
    app.config['FREEZER_DESTINATION_IGNORE'] = [".git", ]

    @freezer.register_generator
    def product_url_generator():
        for path in dynamic_paths:
            yield "/" + path
    freezer.freeze()

if __name__ == "__main__":
    dynamic_paths = [
        'filename_one.html',
        'filename_two.html',
    ]
    generate_static_files(dynamic_paths)

test_dynamic.html
<html>
  <head></head>
  <body><h1>{{ value }}</h1></body>
</html>

결과





해설


  • dynamic_paths를 자유롭게 설정하여 원하는만큼 동적 경로를 제공합니다.
  • @app.route가 동적이지 않으면 자동으로 생성됩니다.
  • 동적 경로에 대해 사전 data에서 해당 값을 원하는대로 준비 할 수 있습니다.
  • app.config['FREEZER_RELATIVE_URLS'] = True로 상대적으로
  • app.config['FREEZER_DESTINATION'] = '../qiita/files'로 출력 대상 설정. 선택 사항 (= 'build')
  • app.config['FREEZER_DESTINATION_IGNORE'] = [".git", ] 로 출력처의 지정 파일을 보호할 수 있다.

    • 참고


  • Frozen-Flask 0.15 documentation
  • Frozen-Flask로 정적 사이트 생성 - Qiita
  • 프런트 미학습 대학생이 1주일에 Vue.js를 사용한 포트폴리오를 만든 이야기 - Qiita
  • htps //w w. 레스메. 이 d / t 벽 ds
  • htps : // 코 m / 주름 1991 / ms / 58b53c5b4df8d6 A7053
    • 웹 개발 경험이 없는 인프라 엔지니어가 Github에서 포트폴리오를 공개한 이야기
    github.io 웹 페이지에 테마를 반영해 보았습니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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