handmade blog

✍️

Blog feito à mão

Leia este documento em outro idioma: ?? ?? ?? ?? ?? ?? ??

Handmade Blog é um gerador de blog estático leve para pessoas que desejam iniciar um blog rapidamente. Ele suporta documento do tipo artigo para uma postagem de blog, documento do tipo trabalho para portfólio, destaques de código, sintaxe KaTeX, notas de rodapé e muito mais.

Demonstração: aqui

Vitrine

• betty-grof.github.io: https://github.com/betty-grof/betty-grof.github.io
• parksb.github.io: https://github.com/parksb/parksb.github.io

Resultados do farol

artigo/0.html no celular

artigo/0.html no computador

Começando

1. Clique no botão ‘Usar este modelo’ acima da lista de arquivos para criar um novo repositório. Se você quiser usar o domínio github.io, nomeie o repositório {YOUR_ID}.github.io . (por exemplo, betty-grof.github.io ) Não se esqueça de ativar a opção ‘Incluir todas as filiais’.

   

   

2. Clique na guia 'Configurações' em seu repositório e defina o branch de origem do GitHub Pages como branch gh-pages . GitHub Pages hospedará seu site com base no branch gh-pages . Você poderá acessar o site via https://{YOUR_ID}.github.io/ em alguns minutos.

   

   

3. Clone o repositório e instale pacotes de nós.

   $ git clone https://github.com/{YOUR_ID}/{REPOSITORY_NAME}.git # git clone https://github.com/betty-grof/betty-grof.github.io.git
   $ cd {REPOSITORY_NAME} # cd betty-grof.github.io
   $ npm install

4. Personalize alguns textos, como o título da navegação (em app/templates/navigations.ejs ) e execute npm run build .

    < nav >
     < a class =" logo-link " href =" / " >
       < h1 > CUSTOMIZED BLOG TITLE </ h1 >
       < span > customized blog subtitle </ span >
     </ a >
     < small >
       < a id =" about " class =" info-link " href =" /about.html " > ?About </ a > /
       < a id =" works " class =" info-link " href =" /works.html " > Works </ a > /
       < a id =" articles " class =" info-link " href =" /articles.html " > Articles </ a >
     </ small >
   </ nav > 

   $ npm run build

5. Execute o script npm start para iniciar um servidor local escutando http://localhost:8080/ . O servidor local é baseado no diretório dist .

   $ npm run build
   $ npm start

   

6. Confirme e envie as alterações em seu diretório de trabalho para o repositório remoto.

   $ git add ./app/templates/navigations.ejs
   $ git commit -m " Customize the blog title and subtitle "
   $ git push origin master

7. Execute o script deploy se estiver pronto para hospedar o site. Este script cria arquivos locais no diretório dist e os envia para a ramificação gh-pages que contém apenas os arquivos no diretório dist . GitHub Pages hospedará seu site em https://{YOUR_ID}.github.io/ com base no branch gh-pages automaticamente.

   $ npm run deploy

Uso

Recarregamento ao vivo

1. Execute npm run watch para rastrear alterações em tempo real.
2. Execute npm start para iniciar o servidor local. ( npm run watch ainda deve estar em execução em segundo plano ou em outra guia ou em outra sessão.)
3. Agora, ele é criado automaticamente sempre que você faz alterações em qualquer arquivo nos diretórios app/templates , app/styles e _articles .

Redação e publicação de documento

1. Escreva um documento no diretório _articles ou _works .
2. Execute npm run publish article ou npm run publish work script para converter documentos markdown em HTML.
3. Visualize o documento convertido no servidor local usando o script npm start .
4. Confirme e envie as alterações para o repositório e execute npm run deploy para implantar.

Modelo de edição

Modifique um modelo ejs para alterar o conteúdo da página existente. Por exemplo, se você deseja colocar uma imagem na página de destino, abra o arquivo app/templates/index.ejs e adicione a tag img ao elemento main-container .

 < main id =" main-container " >
  < img src =" ../assets/profile.jpg " alt =" My profile picture " />
  < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ p >
</ main >

Em seguida, execute o script npm run build para publicar a página inicial modificada e visualizar as alterações no servidor local usando o script npm start .

$ npm run build
$ npm start

Se você estiver pronto para implantar, execute o script npm run deploy . Você pode alterar não apenas a página de destino, mas também qualquer página dessa forma. (Talvez você precise entender a estrutura do projeto.)

Adicionando um domínio personalizado

Crie um arquivo CNAME no diretório raiz. O processo de construção selecionará automaticamente o CNAME para você e você poderá veicular seu blog a partir de seu domínio personalizado.

Para saber mais sobre como o Github gerencia CNAMEs, confira a documentação

Estrutura do projeto

• _articles - Arquivos Markdown para as postagens do blog.
• _works - Arquivos Markdown para o portfólio.
• app
  • assets - Quaisquer arquivos a serem importados por arquivos HTML, como imagem, fonte, etc.
  • public - arquivos HTML gerados pelo script publish . O diretório server e dist é baseado neste diretório. Não altere os arquivos neste diretório diretamente.
    • article - arquivos HTML convertidos do diretório _articles .
    • work - arquivos HTML convertidos do diretório _works .
  • styles - Código fonte CSS a ser importado pelos arquivos HTML.
  • static - Quaisquer arquivos estáticos que não são compilados pelo script build , como robots.txt , sitemap.xml ou arquivos SEO. O script build copia todos os arquivos deste diretório para o diretório dist .
  • templates - arquivos de modelo EJS. O script publish converte modelos neste diretório em arquivos HTML.
• dist - Arquivos compilados pelo script build . O script start abre o servidor local com base neste diretório e o script deploy implanta um site nas páginas do GitHub com base neste diretório. Não altere os arquivos neste diretório diretamente.
• services - Código fonte implementando script publish .
  • classes
  • models
• tools - Código-fonte que implementa vários scripts npm.

Scripts Disponíveis

npm start

Inicia a escuta do servidor de desenvolvimento local em http://localhost:8080/.

npm run publish

Converte modelos em arquivos HTML.

$ npm run publish article

Converte todos os artigos.

$ npm run publish works

Converte todas as obras.

$ npm run publish article 5

Converte um artigo cujo id é 5.

$ npm run publish work 3

Converte uma obra cujo id é 3.

$ npm run publish page

Converte todas as páginas.

npm run watch

Reconstrói arquivos de modelo no diretório templates , arquivos css no diretório styles e arquivos markdown no diretório _articles automaticamente sempre que os arquivos são modificados.

npm run build

Constrói arquivos com empacotador de pacotes.

npm run deploy

Constrói e implanta os arquivos.

Licença

Este projeto está licenciado sob a licença MIT - consulte o arquivo LICENSE para obter detalhes.