the mvm.github.io
Initial Release of V2.0.0
O site de demonstração agora espelhou no IPFS!
Por Armando Maynez, com base em v1.0 por Artem Sheludko.
O Adam Blog 2.0 é um tema Jekyll que foi construído para ser 100% compatível com as páginas do GitHub. Se você não estiver familiarizado com as páginas do GitHub, pode conferir a documentação deles para obter mais informações. O guia de Jonathan McGlone sobre a criação e a hospedagem de um site pessoal no GitHub também é um bom recurso.
Jekyll é um gerador de sites estáticos simples, com reconhecimento de blog para sites de sites pessoais, de projeto ou organização. Basicamente, Jekyll pega o conteúdo da sua página junto com os arquivos de modelo e produz um site completo. Para mais informações, visite o site oficial da Jekyll para obter sua documentação. O Codecademy também oferece um ótimo curso sobre como implantar um site Jekyll para iniciantes completos.
A beleza de hospedar seu site no Github é que você não precisa realmente instalar o Jekyll no seu computador. Tudo pode ser feito através do editor de código do GitHub, com conhecimento mínimo de como usar o Jekyll ou a linha de comando. Tudo o que você precisa fazer é adicionar suas postagens ao diretório _posts e editar o arquivo _config.yml para alterar as configurações do site. Com algum conhecimento rudimentar de HTML e CSS, você pode até modificar o site do seu gosto. Tudo isso pode ser feito através do editor de código do GitHub, que atua como um sistema de gerenciamento de conteúdo (CMS).
<tweet> </tweet> no seu Markdown.Verifique o tema em ação
A página principal se parece com o seguinte:
Seletor de modo escuro no menu principal:
A página da postagem parece:
404 responsiva personalizada:
O modo escuro se parece com o seguinte:
Para uma instalação local completa do Adam Blog 2.0, faça o download de sua própria cópia do Adam Blog 2.0 e descompacte -o em seu próprio diretório. A partir daí, abra sua ferramenta de linha de comando favorita, insira bundle install e digite jekyll serve . Seu site deve estar em funcionamento localmente em http: // localhost: 4000.
Se você é completamente novo no Jekyll, recomendo conferir a documentação em https://jekyllrb.com/ ou há um tutorial de Smashing Magazine.
Se você estiver hospedando seu site nas páginas do GitHub, cometer uma alteração no arquivo _config.yml (ou qualquer outro arquivo) forçará uma reconstrução do seu site com Jekyll. Quaisquer alterações feitas devem ser visíveis logo depois. Se você estiver hospedando seu site localmente, deve executar jekyll serve novamente para que as alterações ocorram.
Vá ao diretório _posts para visualizar todas as postagens que estão atualmente no site e para ver exemplos de como os arquivos de postagem geralmente se parecem. Você pode simplesmente duplicar a postagem do modelo e começar a adicionar seu próprio conteúdo.
Bire esse repositório em sua própria conta.
Você pode hospedar seu site Jekyll gratuitamente com páginas do GitHub. Clique aqui para obter mais informações.
Ao forking, se você usar como destino, um repositório chamado nome USERNAME.github.io , seu URL será https://USERNAME.github.io/ , else https://USERNAME.github.io/REPONAME/ ) e seu site será publicado no ramo Gh-Pages. Nota: Se você estiver hospedando vários sites com o mesmo nome de usuário do Github, precisará usar as páginas do projeto em vez de páginas de usuário - basta alterar o nome do repositório para algo diferente de 'http://username.github.io'.
Além do seu nome GitHub-Username.github.io que mapeia o URL da raiz, você pode servir sites usando uma filial de gh-pages para outros repositórios para que estejam disponíveis no github-sername.github.io/repo-name.
Isso exigirá que você modifique o _config.yml como assim:
# Site settings
title : Repo Name
email : [email protected]
author : Your Name
description : " Repo description "
baseurl : " /repo-name "
url : " https://github-username.github.io "Isso garantirá que o caminho relativo correto seja construído para seus ativos e postagens.
Modifique o arquivo _config.yml , localizado no diretório raiz, com seus dados.
# Site settings
title : The Title for Your Website
description : ' A description of your blog '
permalink : ' :title:output_ext ' # how the permalinks will behave
baseurl : " / " # the subpath of your site, e.g. /blog
url : " " # the base hostname & protocol for your site, e.g. http://example.com
logo : " " # the logo for your site
logo-icon : " " # a smaller logo, typically squared
logo-icon-SEO : " " # must be a non SVG file, could be the same as the logo-icon
# Night/Dark mode default mode is "auto", "auto" is for auto nightshift (19:00 - 07:00), "manual" is for manual toggle, and "on/off" is for default on/off. Whatever the user's choice is, it will supersede the default setting of the site and be kept during the visit (session). Only the dark mode setting is "manual", it will be always kept on every visit (i.e. no matter the browser is closed or not)
night_mode : " auto "
logo-dark : " /assets/img/branding/MVM-logo-full-dark.svg " # if you want to display a different logo when in dark mode
highlight_theme : syntax-base16.monokai.dark # select a dark theme for the code highlighter if needed
# Author settings
author : Your Name # add your name
author-pic : ' ' # a picture of you
about-author : ' ' # a brief description of you
# Contact links
email : [email protected] # Add your Email address
phone : # Add your Phone number
website : # Add your website
linkedin : # Add your Linkedin handle
github : # Add your Github handle
twitter : # Add your Twitter handle
bandcamp : # Add your Bandcamp username
# Tracker
analytics : # Google Analytics tag ID
fbadmin : # Facebook ID admin
# Paginate
paginate : 6 # number of items to show in the main page
paginate_path : ' page:num '
words_per_minute : 200 # default words per minute to be considered when calculating the read time of the blog posts Para configurar o boletim, crie uma conta em https://mailchimp.com, configure um formulário de inscrição na Web e cole o link no formulário de inscrição de incorporação no arquivo config.yml :
# Newsletter
mailchimp : " https://github.us1.list-manage.com/subscribe/post?u=8ece198b3eb260e6838461a60&id=397d90b5f4 " Para configurar o Disqus, configure um site Disqus com o mesmo nome do seu site. Em seguida, em _config.yml , edite o valor disqus_identifier a ser ativado.
# Disqus
discus_identifier : # Add your discus identifier
comments_curtain : yes # leave empty to show the disqus embed directlyMais informações sobre como configurar o Disqus.
Personalize as cores do site. Modify /assets/css/main.css da seguinte forma:
html {
--shadow : rgba ( 32 , 30 , 30 , .3 );
--accent : # DB504A ; /* accent */
--accent-dark : # 4e3e51 ; /* accent 2 (dark) */
--main : # 326273 ; /* main color */
--main-dim : # 879dab ; /* dimmed version of main color */
--text : # 201E1E ;
--grey1 : # 5F5E58 ;
--grey2 : # 8D897C ;
--grey3 : # B4B3A7 ;
--grey4 : # DAD7D2 ;
--grey5 : # F0EFED ;
--background : # ffffff ;
}
html [ data-theme = "dark" ] {
--accent : # d14c47 ; /* accent */
--accent-dark : # CD8A7A ; /* accent 2 (dark) */
--main : # 4C6567 ; /* main color */
--main-dim : # 273335 ; /* dimmed version of main color */
--text : # B4B3A7 ;
--grey1 : # 8D897C ;
--grey2 : # 827F73 ;
--grey3 : # 76746A ;
--grey4 : # 66645D ;
--grey5 : # 4A4945 ;
--background : # 201E1E ;
--shadow : rgba ( 180 , 179 , 167 , .3 );
} Personalize as fontes do site. Modify /assets/css/main.css da seguinte forma:
...
--font1 : 'Lora' , charter , Georgia , Cambria , 'Times New Roman' , Times , serif ; /* body text */
- - font2 : 'Source Sans Pro' , 'Helvetica Neue' , Helvetica , Arial , sans-serif ; /* headers and titles */
- - font1 - light : 400;
- - font1 - regular : 400;
- - font1 - bold : 600;
- - font2 - light : 200;
- - font2 - regular : 400;
- - font2 - bold : 700;
... Se você alterar as fontes, também precisará modificar /_includes/head.html da seguinte
< link href =" https://fonts.googleapis.com/css?family=Lora:400,600|Source+Sans+Pro:200,400,700 " rel =" stylesheet " > Exclua tudo dentro <style></style> pouco antes da linha acima:
< style >
/* latin */
@font-face {
font-family: 'Lora';
...
</ style > Você encontrará postagens de exemplo no seu /_posts/ diretório. Vá em frente e edite qualquer postagem e reconstrua o site para ver suas alterações, para as páginas do GitHub, isso acontece automaticamente a cada compromisso. Você pode reconstruir o site de várias maneiras diferentes, mas a maneira mais comum é executar jekyll serve , que inicia um servidor da Web e regenera automaticamente seu site quando um arquivo é atualizado.
Para adicionar novas postagens, basta adicionar um arquivo no diretório _posts que segue a convenção do YYYY-MM-DD-name-of-post.md e inclui o assunto da frente necessário. Dê uma olhada em qualquer post de amostra para ter uma idéia sobre como funciona. Se você já possui um site construído com o Jekyll, basta copiar suas postagens para migrar para o Adam Blog 2.0.
As opções de matéria frontal para cada postagem são:
---
layout : post # ensure this one stays like this
read_time : true # calculate and show read time based on number of words
show_date : true # show the date of the post
title : Your Blog Post Title
date : XXXX-XX-XX XX:XX:XX XXXX
description : " The description of your blog post "
img : # the path for the hero image, from the image folder (if the image is directly on the image folder, just the filename is needed)
tags : [tags, of, your, post]
author : Your Name
github : username/reponame/ # set this to show a github button on the post
toc : yes # leave empty or erase for no table of contents
---Edite seu post do blog usando o Markdown. Aqui está um bom guia sobre como usá -lo.
Exclua imagens dentro de /assets/img/posts/ e envie suas próprias imagens para suas postagens.
Verifique se as páginas do GitHub estão ativadas nas configurações do repositório e apontando para o ramo principal ou master (onde você clonou este repositório).
Se você estiver familiarizado com Jekyll, a estrutura do diretório do Blog Adam 2.0 não deve ser muito difícil de navegar. A seguir, alguns destaques das diferenças que você pode notar entre a estrutura do diretório padrão. Mais informações sobre o que essas pastas e arquivos podem ser encontradas no site de documentação de Jekyll.
Adam Blog 2.0/
├── _includes # Theme includes
├── _layouts # Theme layouts (see below for details)
├── _posts # Where all your posts will go
├── assets # Style sheets and images are found here
| ├── css # Style sheets go here
| | └── _sass # Folder containing SCSS files
| | └── main.css # Main SCSS file
| | └── highlighter # Style sheet for code syntax highlighting
| └── img #
| └── posts # Images go here
├── _pages # Website pages (that are not posts)
├── _config.yml # Site settings
├── Gemfile # Ruby Gemfile for managing Jekyll plugins
├── index.html # Home page
├── LICENSE.md # License for this theme
├── README.md # Includes all of the documentation for this theme
├── feed.xml # Generates atom file which Jekyll points to
├── 404.html # custom and responsive 404 page
├── all-posts.json # database of all posts used for infinite scroll
├── ipfs-404.html # 404 page for IPFS
├── posts-by-tag.json # database of posts by tag
├── robots.txt # SEO crawlers exclusion file
├── search.json # database of posts used for search
└── sitemap.xml # automatically generated sitemap for search engines Para começar completamente do zero, basta excluir todos os arquivos nas pastas _posts , assets/img/posts e adicionar seu próprio conteúdo. Tudo no arquivo _config.yml pode ser editado para atender às suas necessidades. Altere também o arquivo favicon.ico para seu próprio favicon.
Se você tiver uma cotação tweetable em sua postagem no blog e deseja apresentá -la como um clique para tweet Block, basta usar as tags <tweet></tweet> , tudo entre elas será convertido em um clique em uma caixa de tweet.
É possível rastrear as estatísticas do seu site através do Google Analytics. Semelhante ao Disqus, você precisará criar uma conta para o Google Analytics e inserir o ID do Google correto para o seu site no google-ID no arquivo _config.yml . Mais informações sobre como configurar o Google Analytics.
O Atom é suportado por padrão através do Jekyll-Foed. Com o Jekyll-FEED, você pode definir variáveis de configuração, como 'title', 'description' e 'autor', no arquivo _config.yml .
Seu arquivo de alimentação Atom estará ao vivo em https://your.site/feed.xml Exemplo.
Todos os ícones de mídia social são cortesia da fonte incrível. Você pode alterar quais ícones aparecem, bem como a conta que eles vinculam, no arquivo _config.yml .
O Adam Blog 2.0 sai da caixa com o Mathjax, que permite exibir equações matemáticas em suas postagens através do uso do látex. Basta adicionar Mathjax: yes no frontmatter da sua postagem.
< p style = " text-align : center " >
( theta _ {t+1} = theta _ {t} - dfrac{eta}{sqrt{hat{v} _ t} + epsilon} hat{m} _ t ) .
</ p >
O Adam Blog 2.0 fornece destaque de sintaxe por meio de blocos de código cercado. O destaque da sintaxe permite exibir o código -fonte em diferentes cores e fontes, dependendo da linguagem de programação está sendo exibida. Você pode encontrar a lista completa de linguagens de programação suportadas aqui. Outra opção é incorporar seu código através da GIST.
Você pode escolher o tema da cor para o destaque da sintaxe no arquivo _config.yml :
highlight_theme : syntax-base16.monokai.dark # select a theme for the code highlighterConsulte o diretório marcador para referência sobre as opções.
A Jekyll oferece suporte para o Markdown com sabor do Github, que permite formatar suas postagens usando a sintaxe do Markdown.
Confira os documentos Jekyll para obter mais informações sobre como tirar o máximo proveito de Jekyll. Arquive todas as solicitações de bugs/recurso no Repo Github de Jekyll. Se você tiver dúvidas, pode perguntar a eles em Jekyll.
Se você deseja fazer uma solicitação de recurso ou relatar um bug ou erro de digitação na documentação, envie um problema do GitHub. Se você deseja fazer uma contribuição, sinta -se à vontade para enviar uma solicitação de tração - como um bônus, creditarei todos os colaboradores abaixo! Se esta for sua primeira solicitação de tração, pode ser útil ler o fluxo do GitHub primeiro.
O Adam Blog 2.0 foi projetado como base para os usuários personalizarem e se ajustarem às suas próprias necessidades exclusivas. Lembre -se disso ao solicitar recursos e/ou enviar solicitações de tração. Alguns exemplos de mudanças que eu adoraria ver são coisas que tornariam o site mais fácil de usar ou melhores maneiras de fazer as coisas. Evite alterações que não beneficiam a maioria dos usuários.
Este tema é um software de código aberto totalmente gratuito e aberto. Você pode usá -lo como quiser, pois ele é distribuído sob a licença do MIT. Se você estiver tendo algum problema, alguma dúvida ou sugestão, sinta -se à vontade para arquivar um problema do GitHub.
