מסך הצגת דפי GitLab

כשאני כותב פוסטים בנושא Apache APISIX, אני רוצה שעודכני יבדקו אותם קודם. עם זאת, זהו הבלוג שלי ומכיוון שאני מערבב פוסטים אישיים ועסקיים, אני רוצה לשמור אותם מחוץ למאגר. אני זקוק לתצוגה שניתן לגשת אליה רק על ידי מעטים, משהו כמו תצוגת Vercel. אני משתמש ב-GitLab Pages, ואין פונקציה כזו מוכנה מראש.

I tried two methods: GitHub gists and PDFs. Both have issues.

Gists לא מציגים כמו הדף הסופי. ניסיתי לשפר את המצב על ידי שימוש ב-DocGist. זו שיפור, אם כי לא התיקון האופטימלי.

בנוסף, gists אינם מציגים תמונות מאחר שאני כותב את הפוסטים שלי ב-Asciidoc. אני חייב לשים תמונות בתגובות, וזה שובר את הזרימה. ניסיתי ל-להשאיר את התמונות על הgist, אך הם אינם מופיעים בזרימת הפוסט בשום מקרה. היתרון על תגובות הוא שהן מסודרות; החיסרון הוא שעלי לשנות את ה-Asciidoc.

I used gists because I'm used to GitHub reviews. But since it's my blog, I neither need nor want the same kind of reviews as in a regular Merge Request. I need people to point me to when something needs to be clarified or I missed a logical jump, not that I made a typo (I use Grammarly for this). For this reason, a PDF export of a post is enough to review.

עם זאת, ל-PDFs יש בעיות משלהם: דף אינטרנט "דף" הוא בפועל בלתי מוגבל, ואילו דף PDF סטנדרטי חותך את הראשון לדפים סטנדרטיים. חלוקות יכולות לקרות ברווחה של תרשימים. עוד, PDFs מקשה על הפצה בהרבה.

בפוסט זה, אתאר איך כינסתי את GitLab Pages כדי לקבל את התצוגה שאני רוצה.

סיכום של GitLab Pages

GitLab Pages דומים ל-GitHub Pages:

עם GitLab Pages, אפשר לפרסם אתרים סטטיים ישירות ממאגר ב-GitLab.

לפרסום אתר עם Pages, אפשר להשתמש בכל יצרן אתרים סטטיים, כמו Gatsby, Jekyll, Hugo, Middleman, Harp, Hexo, או Brunch. אפשר גם לפרסם אתר כתוב ישירות ב-HTML פשוט, CSS ו-JavaScript.

— GitLab Pages

ככה אתה רואה את הפוסט הזה. לא מצאתי תכונת תצוגה עבור GitLab Pages. שאלתי מומחים וללא הצלחה; GitLab לא מציע תצוגות.

מיישבים את העבודה

I didn't believe it initially, but you only need to create a dedicated artifact. Since the artifact consists of web files, the browser will render them.

הרעיון הוא ליצור פריט כזה, נגיש בכתובת URL, שאי אפשר לחזות בקלות. אז אני יכול לשתף את ה-URL עם עמיתיי ולבקש מהם לסקור. כדי להתחיל, אפשר להעתיק את הבניה הקיימת על master:

stages:
  - preview

preview:
  stage: preview
  image:
    name: registry.gitlab.com/nfrankel/nfrankel.gitlab.io:latest
  before_script: cd /builds/nfrankel/nfrankel.gitlab.io
  script: bundle exec jekyll b --future -t --config _config.yml -d public
  artifacts:
    paths:
      - public
  only:
    refs:
      - preview
  variables:
    JEKYLL_ENV: production

בשלב זה, האתר זמין בכתובת https://$CI_PROJECT_NAMESPACE.gitlab.io/-/$CI_PROJECT_NAME/-/jobs/$CI_JOB_ID/artifacts/public/index.html. יש כמה בעיות שצריך לתקן, אם כי.

הפוך אותו לעבוד

בואו נתקן את הבעיות לפי סדר חשיבות.

תיקון הרשאות גישה

הפרויקט הוא פרטי; לכן, רק אני יכול לגשת לפריט: זה מנפק את המטרה הראשונית של מתן התצוגה לאחרים.

I want to give my teammates only limited access to my GitLab repository. I gave them Guest access, according to the Principle of least privilege. However, it still didn't work.

כפי שמופיע בתיעוד, עליך גם להפוך את הזרם הבנייה שלך ציבורי. עבור אל ההגדרות > CI/CD > זרמי בנייה כללית ובדוק את תיבת הסימון זרמי בנייה ציבוריים.

תיקון קישורים יחסיים

I use Jekyll to build HTML from Asciidoc. To generate links, Jekyll uses two configuration parameters:

• התחום, למשל, , מוגדר עם url
• הנתיב, למשל, /, שהוגדר עם baseurl

שניהם שונים בתצוגה מקדימה. אתה חייב להגדיר את הפרמטרים הללו בקובץ קונפיגורציה YAML; אין חלופה של משתנה סביבה.

בואו נשנה את הבנייה בהתאם:

preview:
  stage: preview
  image:
    name: registry.gitlab.com/nfrankel/nfrankel.gitlab.io:latest
  before_script:
    - cd /builds/nfrankel/nfrankel.gitlab.io
    - "printf 'url: https://%s.gitlab.io\n' $CI_PROJECT_NAMESPACE >> _config_preview.yml"                        #1
    - "printf 'baseurl: /-/%s/-/jobs/%s/artifacts/public/\n' $CI_PROJECT_NAME $CI_JOB_ID >> _config_preview.yml" #2
    - cat _config_preview.yml                                                                                    #3
  script: bundle exec jekyll b --future -t --config _config.yml,_config_preview.yml -d public                    #4

1. קבע את url באמצעות משתנה הסביבה CI_PROJECT_NAMESPACE. יכולתי להשתמש בערך קשור מראש מאחר והוא סטטי, אך זה עושה את התוכנית נגישה יותר
2. קבע את baseurl באמצעות משתני הסביבה CI_PROJECT_NAME ו-CI_JOB_ID. האחרון הוא החלק האקראי של הדרישה
3. הצג את תוכן הקונפיגורציה למטרות בדיקה
4. השתמש בזה!

שיפור הנוחות

זה משעמם לחלוטין להפיץ את הכתובת הנכונה בכל פעם. עדיף לרשום אותה בתיבת המחשבות לאחר הבנייה:

after_script: echo https://$CI_PROJECT_NAMESPACE.gitlab.io/-/$CI_PROJECT_NAME/-/jobs/$CI_JOB_ID/artifacts/public/index.html

יש עדיין חלק אחד חסר. GitLab Pages מציעים דף ראשי. לדוגמה, אם אתה מבקש את https://blog.frankel.ch, הם ישרתו את הדף הראשי index.html. עם אובייקטים פשוטים, זה לא המקרה. בהתחשב בכך שאני רוצה להציע רק פוסט יחיד לתצוגה, זו לא בעיה, אז לא חקרתי את הקונפיגורציה עוד.

שימוש

בשלב זה, אני רק צריך לדחוף לענף שלי preview:

git push --force origin HEAD:preview

הפירות העליונים בסעודה, אנו לא צריכים להחזיק את הענף במקורדונלי; פשוט דחף לאחד המרוחק.

מסקנה

בפוסט הזה, הראיתי כיצד להציג דפי GitLab Pages ולשתף את כתובת הפריסה עם חברי הקבוצה בכמה שלבים. החלק הקשה ביותר היה להבין שאבטחות האינטרנט מצומדים באופן רגיל עם הדפדפן.

להמשיך רחוק יותר:

• הרשאות GitLab CI/CD
• הגדר את נגישות האבטיחים בלתי תלויה בנגישות הפרויקט או הקבוצה
• שנה את המשתמשים שיכולים לצפות בבקרות שלך