Darmowy blog z własną domeną na scriptogr.am

31 sierpnia, 2012 w kategoriach: Pozostałe

3,312 0
Dane:
  • Czas pracy: 30min
  • Poziom: Podstawowy
Opis:

W tym tutorialu chciałbym opisać jak stworzyć prosty blog na darmowym skrypcie ze strony scriptogr.am i jak dodawać na nim wpisy i go obsługiwać.

Pokaż/Ukryj wszystko

Na samym początku chciałbym przedstawić swój blog, który oparty jest na tych zasadach, które opisze poniżej http://creativebook.pl

Więc potrzebne nam jest na początek konto na dropboxie. DropBox, jest to wirtualny serwer, który tworzy specjalny folder na naszym dysku twardym. Gdy wrzucimy coś do tego folderu automatycznie nam się to ładuje na serwer i możemy dac np znajomemu link do tego pliku, wszystko robi się automatycznie nic nie musimy samemu uploadować, wystarczy, że wrzucimy dany plik do folderu dropboxa na naszym dysku. Początkowo mamy 2,5GB miejsca na naszym koncie, możemy to powiększyć przez zaproszonych znajomych, klikanie w fanpage na FB, zakup miejsca itd. Więc jeżeli ktoś nie ma tam jeszcze konta, to podam od razu swój link referencyjny, może ktoś się skusi click

Alt dropbox

Postępujmy według instrukcji (to chyba już będzie w miare proste:)) Gdy już wszystko zrobimy w trayu pojawi się ikonka dropboxa (po prawej na dole obok zegara), Mamy tam szybki dostęp do naszego folderu DP na naszym dysku, wejście na stronę, ilość miejsca itd

Alt hggvloe

Dalej, gdy już zrobilismy sobie konto na serwerze dropbox, musimy je połączyć ze scriptogr.am. W tym celu wchodzmy na tą stronę i wybieramy taki duży przycisk na stronie głównej "Dropbox connect"

Alt xpdyljf

Nastepnie wyświetli się nam okienko z pytaniem czy chcemy połączyć scriptogr.am z naszym kontem na dp, klikamy "Allow"

Alt usuniety

Teraz DP utworzył folder dla naszego bloga, do którego będziemy wrzucać nasze wpisy i gdy się załadują na serwer, zsynchronizujemy stronę na scriptogr.am i będziemy widzieć ją na blogu. W następnym kroku omówimy samą stronę z blogiem.


Wydawnictwo Strefa Kursów

Po tym dodaniu scriptogr.am stworzy nam domenę wg swojej czyli "scriptogram.am/waszanazwa.
Teraz wejdźmy na nasz blog i po prawej na górze mamy taką ikonkę, podobną do papirusu

Alt svbqoyt

Musimy w nią kliknąć, gdy chcemy wejść do edycji naszego bloga. Teraz może słów kilka o tym co możemy ustawić. Może zacznijmy od opcji Settings"

Alt yhxyods

Więc tak od góry "Username" czyli pod jakim użytkownikiem będzie się wyświetlał mój blog, ja mam wpisane "kodi" od imienia więc domena, która jest standardowa na scriptogr.am'mie bedzie scriptogr.am/kodi.

Dalej mamy "Your real name" dosłownie, chyba każdy wie, co to znaczy, jednak w tym skrypcie to pole będzie w kodzie wyświetlone jako tytuł strony, czyli tam zapisałem tytuł bloga.

"Blog description" no spełnia to rolę w kodzie jak meta tag description, czyli jest krótki opisem strony.

"Mobile layout" to możemy sobie zaznaczyć, gdy chcemy by nasz blog był w formie responsive, czyli dopasowywał się do rozdzielczości mobilnych urządzeń (ipad, telefon itd)

"Time zone" czyli strefa czasowa, w Polsce obowiązuje +1gmt więc trzeba zmienić standardowe ustawienie.

"Custome domain" nic innego jak domena, którą chcemy podpiąć jeżeli oczywiście posiadamy takową. W innym kroku powiem jak zrobić to poprawnie na podstawie OVH, bo w tym serwisie moja jest wykupiona.

Po prawej stronie mamy kolejne ustawienia "Tools"

Alt tools

No tutaj już chyba wiadomo o co chodzi.

"Themes" tutaj wybieramy sobię skórkę czyli szatę graficzną jaką chcemy by nasz blog posiadał, możemy kliknąć w ten przycisk, wyświetli nam się po lewej stronie lista nazw skórek, a po prawej mamy podgląd. Jeżeli wybierzemy którąś skórkę, to klikamy na górze "Save" Jednak UWAGA, trzeb pamięta, że taki update na inną skórkę, podmieni plik CSS i HTML czyli wszystkie zapisane w tych plikach nasze osobiste ustawienia będzie trzeba wprowadzać jescze raz!

Na dole mamy edytory do zmieniania stylu CSS oraz kodu w pliku html.

Teraz tak, na tym skrypcie na którym jest nasz blog działa system MarkDown. Zamienia on własne znaczniki automatycznie na kod hmtl. Osobiście do tego używam programu MarkDownPAD, które można ściągnąć ze strony http://markdownpad.com/. W tym programie można ustawić sobie bezproblemowo, np wielkośc nagłówka, dodać link do naszego wpisu, dodać obrazek (ja dodaje obrazki uploadowane również na droppbox). A jeżeli chcemy zrobić też tak jak ja czyli wrzucać obrazki na DP po czym wrzucać do postu na blogu, to musimy wrzucić je do folderu "Public" i tak sobie np utworzyć folder ze zdjęciami. Gdy wrzucimy nasze foto w ten sposób, to będzie bezpośredni link do niego. Gdy wrzucimy zdjęcie do innego folderu nie wyświetli się nam, bo będzie uważane za zdjęcie prywatne. Wrzucając zdjęcie do folderu public chwilę czekam na zielony znaczek po czym klikamy PPM na zdjęcie i wybieramy "Dropbox/Copy public link" w ten sposób mamy już w pamięci podręcznej link i możemy go już tylko wkleić.

Wracając do tworzenia postów. Na początku każdego postu, musimy zadeklarować co to ma być.Jeżeli dodajemy post musimy na początku dać takie coś

Alt poczatek

Gdzie "Title" to tytuł naszego wpisu, "Date" to wiadomo no i "Tags" czyli linki do podobnych rzeczy.

Gdy już sobie stworzyliśmy i "upiekszyliśmy" nasz post w programie MarkDownPAD, zapiszmy go w postaci pliku z rozszerzeniem ".md" teraz musimy go przenieść do naszego folderu droppboxa w miejsce Dropbox/Apps/Scriptogram/post

Alt vsenlgd

teraz nie pozostaje nam nic innego jak wejść na naszą stronę scriptogr.am/twojanazwa wcisnąć znaczek ustawień po prawej na górze (ten zwój) i po lewej kliknąć Synchronize

Alt synchro

Chwilkę poczekajmy aż się załaduje, kliknijmy na górze "Close" i powinniśmy mieć nasz post już na blogu!

JEDNA WAŻNA RZECZ, jeżeli chcemy coś ustawić lub dodać post na blogu, nie zrobimy tego przez domenę, którą podepniemy do bloga, musimy zrobić przez nasz indetyfikator na scriptogr.am czyli domenę, którą przypisuje ich system, np scriptogr.amwaszanazwa, ponieważ to ta domena jest podpisana pod serwer dropbox nasz.

Więc tak na tym serwerze zrobiłem po prostu tak, że nie dopisałem DNS żadnych, które by przekierowały naszą domenę na nasz blog, (nawet takich DNS nie znamy), ale przekierowałem domenę na IP 50.116.1.192, które to IP należy do scrtiptogr.am. Na blogowym profilu trzeba dodać nazwę naszej domeny w tym miejscu gdzie wcześniej pisałem.

Jeżeli chodzi o nową stronę tak jak ja np mam Facebook, gdzie po kliknięciu przekierowuje nas na mój Fan Page, czy Subrypcja

Alt gujqifb musimy zrobić inny wpis porzątkowy niż w przypadku nowego postu na stronie. Musimy teraz dodać coś takiego:

Alt fb

Gdzie "Title" to nazwa przycisku (linku), "Date" wiadomo, "Type: Page" czyli, że ma to być nowa strona oraz "Link", gdzie podajemy link do nowej strony. Wrzucamy to tak samo jak w przypadku nowego zwykłego wpisu, czyli wrzucamy do folderu scriptogr.am na naszym dysku w folderach dropboxa i synchronizujemy na naszym profilu bloga.

Jeżeli chcemy dodać nową podstronę tak jak ja to zrobiłem na podstronie "O mnie", Postępujemy podobnie jak w przypadku linku do innej strony, z tym że na początku mamy troche inne deklaracje

Alt o mnie

Czyli "title" tytuł naszego odnośnika "Date" i "Type: Page" czyli inna strona, prawie to samo jak w przypadku nowej strony, jednak tutaj nie podajemy linku dlatego system tworzy podstronę, a nie otwiera innej.

jeżeli chodzi o komentarze, to zintegrowałem sobie je z kontem na http://disqus.com/. Założyłem konto na tym serwisie po czym podpiąłem w sekcji "body" w ustawieniach bloga w HTML moje konto na tym serwisie. U mnie wygląda to tak:

 <div id="disqus_thread"></div>

            <script type="text/javascript">
                var disqus_shortname = 'twoja nazwa profilu na disquis',
                    disqus_identifier = window.location.href.split('/post/')[1].replace('/', ''),
                    disqus_url        = '{{permalink}}',
                    disqus_title      = '{{title}}';

                (function() {
                    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
                    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                })();
            </script>

            <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
            <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

Jeżeli piszemy długi post, to po dodaniu na stronie bloga będzie on widoczny cały na całą stronę naszego bloga. Aby temu zapobiec po kilku zdaniach tekstu powinniśmy wpisać między slowami regułkę

{{more}}

załamie ona tekst w skutek czego na stronię głównej bloga będziemy mieć kilka linijek początkowych naszego postu a całość będzie wyświetlana po wciśnięciu w tytuł postu bądź na dole w "Read more"

Na pewno zauważyliście, że na moim blogu linki "Archive" i "Read more" są po polsku. Otóż idzie to przestawić dodająć krótką regułę na końcu sekcji body w html przed zakończeniem </</script>

$('#menu a').last().text('Archiwum');
  $('.read-more').text('Czytaj dalej');

Teraz powinniście tak jak ja, mieć to po polsku:)

To chyba wszystko z grubsza co chciałem napisać. Mam nadzieję, że zrozumieliśmy większość z moich chaotycznych nauk;) Zapraszam też oczywiście na mój blog http://creativebook.pl. Jeżeli macie jakieś pytania to proszę w komentarzach. Podzielcie się tym tutorialem ze znajomymi, może też skorzystają;)

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dodaj komentarz