כיצד ליצור בלוג סטטי באמצעות קקטוס [OS X]

עדכון: אפליקציית קקטוס הופסקה.

אם אתה לא דורש CMS ו מעדיף רק מקבל אתר סטטי או בלוג, אז Jekyll הוא כלי טוב לקחת סיכון עם. עם זאת, אם אתה מעדיף כלי עם GUI, במקום לעבוד עם כלי שורת הפקודה, אז אולי כדאי לך לבדוק קקטוס.

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

תוך כדי עבודה על הפרויקט שלך, קקטוס יהיה לפקח על כל שינוי שתבצע על הפרויקט שלך ו רענן אוטומטית את הדפדפן כך שתוכל לראות את השינויים באופן מיידי, ב- Mac או בהתקן הנייד שלך. הוא תומך גם SASS / SCSS ו Coffescript מתוך התיבה, ולכן כל שינוי על קובץ זה נוצר באופן אוטומטי.

להתחיל

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

כדי ליצור פרוייקט חדש, לחץ על צור. תראה 4 תבניות זמינות שם. עבור הדרכה זו, אנחנו הולכים עם תבנית הבלוג. לחץ על צור.

תתבקש לתת שם לפרויקט שלך ולבחור את המיקום שבו הפרויקט קיים. הנה אני נותן שם “הבלוג מדהים שלי” לפרויקט. לאחר מכן, תראה את הפרויקט כבר בקקטוס.

שינוי קבצים

הפרויקט שנוצר באמצעות בלוג תבנית קיימת כעת על Finder שלך. כעת נבדוק את האלמנטים הדרושים לבניית הבלוג שלנו. ראש אל הספרייה שבה הקבצים נשמרים. הספריות העיקריות שבהן נשתמש הן תבניות, דפים, ו סטטי ספרייה. ללא שם: בואו לדלג על אחרים לעת עתה.

כדי לשמור על דברים קצרים, הנה למה כל ספרייה:

• תבניות: מכיל קבצי HTML אשר מתנהגים כמו תבנית, בשימוש על ידי קבצי HTML על עמודים לבנות על.
• דפים: מכיל את כל קבצי HTML שיהפכו לדף עם אותו נתיב. לדוגמה: hello.html כאן תהפוך http://yoursite.com/hello.html
• סטטי: מכיל את כל המשאבים הסטטיים כמו CSS, Javascript ותמונות.

עכשיו, נערוך שלושה קבצים עיקריים מתוך הספריות: base.html ו post.html בספריית התבניות ו index.html בספריית הדפים.

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

כדי לראות כיצד הם פועלים, ראשית פתח את base.html בספריית התבניות.

             % לחסום תוכן% תוכן ראשי % endblock content% ---   

base.html הוא קובץ HTML פשוט שאנחנו משתמשים בתבנית 'שלד'. הוא מכיל אלמנטים משותפים של האתר שלנו. אתה יכול לראות כמה “בלוקים” שם; נשתמש בתבנית הילד כדי לעקוף את הבלוקים האלה.

עכשיו לפתוח את post.html הממוקם באותה ספרייה עם base.html.

 % משתרע "base.html"% % block title% title | קקטוס % endblock title% % block content% --- 
 
 כותרת 
 
headline 
 
 
 % block body% זה המקום שבו תוכן הפוסט הוא. % endblock body% 
 --- % endblock content% 

ה post.html מכיל את הסימון עבור דף הכניסה לבלוג שלנו. בשורה הראשונה אתה יכול לראות את זה post.html מרחיב את base.html. משמעות הדבר היא שאנחנו נעקוף את בלוקים על base.html עם בלוקים כאן.

אנו יכולים גם למצוא משתנים כאן, כגון כותרת ו headline. אנו נגדיר את הערכים של משתנים אלו ברשומות בבלוג מאוחר יותר.

עכשיו, מאפשר להסתכל על % block body% בלוק. פעולה זו תידרס על ידי תבנית הילד שמכילה את רשומות הפוסט של הבלוג שלנו.

עבור לספרייה עמודים / פוסטים. הנה שאר רשומות הפוסט שלנו.

 הכותרת שלי כותרת ההודעה: My Post כותרת הכותבת: Agus תאריך: 15-01-2015 % מרחיב "post.html"% % body body% % filter markdown% לורם ipsum dolor sit amet, consectetur adipisicing עלית. ארום, פרפרנדיס ממציא, דומיננטי, רמאי,,,,,,. --- % endfilter% % endblock body% 

ברשומות הפוסט, אנו נותנים ערך למשתנה, כמו כותרת, כותרת, מחבר ותאריך. ערך זה יעבור כאשר נקרא בשם המשתנה בתבנית האב. לאחר מכן אנו כותבים את התוכן של הבלוג שלנו עם Markdown.

עכשיו נלך לדף האינדקס של הבלוג שלנו, פתוח index.html בתוך ה דפים ספרייה. הוא מכיל את רשימת ערכי הבלוג שלנו ואת הקישור לכל ערך. הקוד הראשי נראה כמו למטה:

 % משתרע "base.html"% % block content% -- 
 % עבור פוסט בפוסטים% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock content% 

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

עבור לחלון קקטוס ולחץ על לחצן תצוגה מקדימה כדי להפעיל את השרת. זה יפתח באופן אוטומטי את הדפדפן ופתח את האתר שלך.

עיצוב הבלוג באמצעות SCSS

תכונה נהדרת של קקטוס היא שזה עובד עם SASS / SCSS מהקופסה. רק ושחרר את קבצי ה- .sass או .css לתוך ה סטטי בספרייה ובכל פעם שאתה עורך ולשמור את הקבצים, קקטוס באופן אוטומטי ליצור את CSS.

הנה אני אתן דוגמה באמצעות bootstrap-sass כדי עיצוב הבלוג שלנו. בהנחה שאתה משתמש קשת, פתח מסוף, ונווט אל סטטי המדריך של הפרויקט שלנו באמצעות cd פקודה. לאחר מכן התקן את Bootstrap-sass באמצעות פקודה זו:

$ bower להתקין Bootstrap-sass הרשמי

לאחר ההורדה תושלם, תראה bower_components בספריה הסטטית המכילה רצועה-סוס-רשמית.

עכשיו ללכת לספרייה זו: סטטי / css. צור את קובץ scss, תן לו את השם syle-bs.scss והוסף קוד זה.

 @ import "... / bower_components / bootstrap-sass-official / asset / stylesheets / _bootstrap"; 

מה הקוד עושה את זה לייבא הכל מתוך bootstrap- סאס. לאחר שמירת סגנון-bs.css, תראה סגנון bs.css שנוצר על אותה ספריה המכילה את כל הסגנונות מ bootstrap.

פרוס את הפרוייקט שלך

לבסוף, כאשר הפרויקט שלך מוכן, אתה יכול לפרוס את הפרויקט שלך לגרסה לחיות בקלות באמצעות אמזון S3.