Configure rapidamente um blog pessoal - tutorial para babá

Este artigo é uma versão integrada do conteúdo da coluna. Foi publicado em seções na fase inicial. Para o processo, consulte a identificação do número de série desta coluna.

Prefácio

Ocasionalmente, via uma pergunta que era muito elogiada por alguém: Como comprovar a habilidade dos alunos do curso de informática? Quanto à pergunta abaixo, houve muitos comentários de internautas, o mais claro e realista de que me lembro é: Que habilidade você tem, apenas para fingir ser X?

Vendo isso, tenho que me levantar e dizer uma coisa. A única forma de comprovar sua habilidade é construindo um site, certo? Afinal, ainda é “especialização no setor”, certo? Não sei por que treinar minhas habilidades práticas e ampliar meu conhecimento se tornou uma pretensão para os guerreiros do teclado. Não consigo vencer. Imploro por misericórdia.

Ok, voltando ao assunto, minha intenção original de construir um site pessoal é na verdade muito simples. Talvez você tenha pensado nisso, mas simplesmente não o fez. Eu penso: Existem muitas plataformas de escrita na Internet agora, como a estação C que estou usando agora. Ela é muito madura e tem discussões na comunidade, postagens de perguntas, atualizações do Blink, etc., todas disponíveis. Depois de adquirir o conhecimento relevante, por que não posso escrever um sozinho? Talvez seja mais porque gosto de mexer, haha.

A primeira vez que tive contato com ele foi no módulo “Personalização de Seção” para publicação de artigos na estação C. Ao inserir algumas linhas de código, você consegue ter uma interface linda . Naquela época, por ainda não ter tido contato com CSS e front-end Web, consegui-o através da prostituição gratuita na Internet, o que despertou meu interesse pelo estudo aprofundado.

O que é um blog? Um blog é uma plataforma para todos compartilharem e se comunicarem. Podemos aprender com as experiências de outras pessoas e melhorar a nós mesmos. Isto é verdade para pessoas que leem blogs e para blogueiros que escrevem blogs, é um resumo do que aprenderam, que pode esclarecer seu próprio pensamento, facilitar revisões futuras e desenvolver bons hábitos. Blogs técnicos podem registrar os problemas que encontramos e melhores soluções para lidar com bugs.Se encontrarmos os mesmos problemas no processo de desenvolvimento futuro, nossa memória será mais profunda.

Quando você tem uma ideia, você tem que agir. Quando comecei a implementá-la, percebi que não era um artigo postado por alguns criadores de manchetes, como "Construa seu próprio site em dez minutos e você ainda não não sabe como construir um site sozinho?". Quando você realmente assiste a seus vídeos e artigos e os opera, alguns deles são verdadeiros mestres. Você deve saber algumas das coisas que eles seguem e ser capaz de escrevê-los de maneira mais simples. Existem também alguns “grandes carregadores” que simplesmente publicam artigos de outras pessoas sem vincular ao artigo original.

Foi justamente porque não encontrei um conjunto completo de recursos que pudessem ajudar iniciantes a desenvolver um site que decidi escrever o processo de construção de um site UP e compartilhar algumas de minhas experiências desde o iniciante até a implementação final. Então, se você também deseja ter um site próprio, pode acompanhar e começar. Caso encontre algum problema durante o processo, pode enviar uma mensagem privada ou deixar uma mensagem. Agora, vamos começar

Pense bem, o que mais utilizamos para verificar informações? Alguns amigos dirão: Não precisa perguntar, deve ser “fazer faculdade na estação B”, ou deve ser um buscador. Sim, acho que esta é a ferramenta que a maioria de nós mais usa para aprender coisas novas e seguir em frente. Então, o que procuramos? Por exemplo, você pode fazer isto:

Talvez você também possa fazer isto: Você

pode realmente pesquisar muitos vídeos e artigos. Mas nesta parte descrevo minha jornada mental da perspectiva de um iniciante: porque isso é atualmente apenas uma ideia preliminar em minha mente e ainda não sei como implementá-la. É como se uma pessoa estivesse perdida nas montanhas. Só sei que quero sair, mas não consigo encontrar o caminho.

Nesta sessão, vamos falar sobre como construir um site e o que devo preparar. A maioria dos tutoriais na Internet são longos e longos e você não consegue terminá-los mesmo depois de passar o mouse várias vezes. Os amigos que estão começando vão pensar: “Nossa, é tão difícil, são tantas coisas.” Então aqui classifiquei o conteúdo de cada parte. Basta seguir a ordem e descer passo a passo.

site local

Por que é enfatizado aqui que é "local"?No início, também assisti aos tutoriais e segui as ideias de outras pessoas, como comprar primeiro um nome de domínio, comprar um servidor, etc., encontrei armadilhas. Isso vai dificultar a compra ou a escolha para quem está começando. Por que não pensamos de outra forma? Agora eu construo um site no meu próprio computador e depois “envio” para que outras pessoas possam ver. Olha, isso não está claro?

Para implementar um site no seu próprio computador, você precisa de duas coisas necessárias: um navegador e ferramentas de desenvolvimento . Todos devem ter o primeiro, então não vou entrar em detalhes (senão por que você leu esse meu artigo, hehe), vamos concentre-se nisso. o último

ferramentas de desenvolvimento

WebStorm

WebStorm é uma ferramenta de desenvolvimento JavaScript de propriedade da JetBrains. Foi elogiado pela maioria dos desenvolvedores JS chineses como "artefato de desenvolvimento front-end da Web", "o editor HTML5 mais poderoso", "o IDE JavaScript mais inteligente", etc. Tem a mesma origem do IntelliJ IDEA e herda as funções da poderosa parte JS do IntelliJ IDEA.

Sem mais delongas, venha aqui para baixar o portal

. Há um pequeno problema. Essa coisa é cobrada. Se você é um estudante universitário, pode solicitar uma conta educacional gratuitamente por meio da certificação de estudante. Se... (eu ganhei' Não diga mais, eu vou te contar. Pergunte a Du Niang, você pode encontrar uma maneira), basta instalá-lo sem pensar, não entre em pânico

Vscode

Visual Studio Code ("VS Code" para abreviar) é uma linguagem de programação multiplataforma que a Microsoft anunciou oficialmente na Build Developer Conference em 30 de abril de 2015, que roda no editor de código-fonte da plataforma Mac OS que roda na área de trabalho e está disponível para Windows, macOS e Linux. Possui suporte integrado para JavaScript, TypeScript e Node.js, e um rico ecossistema de extensões para outras linguagens (como C++, C#, Java, Python, PHP, Go) e tempos de execução (como .NET e Unidade)

As duas ferramentas do Portal

são especificamente: a primeira é um balde familiar (tem de tudo, você não precisa se preocupar com isso, é só usar), e a segunda é uma empresa de fachada que requer vários funcionários (plug-ins) para implementar algumas funções. Então se você tiver preguiça de configurá-lo, basta baixar o primeiro, o segundo pode ser mais conveniente na sintaxe Markdown para blogs , sobre o qual falarei mais tarde. Se você é um novato aqui, sugiro que baixe o WebStorm . Algumas configurações a seguir serão mais convenientes.

quadro

O que é "framework"? Estou confuso, hehe. Não entre em pânico quando algo acontecer, apenas ouça o que Jason tem a dizer. Aqui vemos a explicação de uma determinada entrada de grau:

Uma estrutura é uma moldura – referindo-se à sua natureza restritiva, e uma prateleira – referindo-se à sua natureza de suporte. É uma estrutura conceitual básica usada para resolver ou lidar com problemas complexos.Esta
definição ampla de framework é muito popular, especialmente em conceitos de software. Quadros também podem ser usados ​​em estruturas mecânicas

O que isso significa? Por exemplo, se construímos uma casa, como você a constrói? Não podemos começar sem desenhos e trabalhadores, isso não é uma “fantasia”? Primeiramente o projetista deve fazer o desenho de acordo com a necessidade do usuário, e depois os operários podem começar a construir a casa a partir do desenho, certo? Muita coisa foi omitida aqui. Grandes nomes do setor, por favor, me avisem. Deixe-me dar um exemplo.

O mesmo vale para quando construímos sites. Você realmente acha que tantos sites são escritos do zero, linha por linha, por programadores, dia e noite? emmm, na verdade, minha resposta a esta pergunta no início foi: Bem, sim, isso é certo. Só quando fiz um estágio é que descobri que nem tudo na empresa era desenvolvido do zero. (Código aberto é bom, hahaha) Quer ser assim?

Um produto, um projeto, um site... Desde que seja algo que tenha sido feito por antecessores, podemos aprender com isso. Aprenda uma boa codificação, código aberto, e por que deveríamos perder tempo fazendo isso de novo se outros já o implementaram ? Principalmente o WordPress , que será descrito a seguir , é simplesmente uma "operação sem cérebro". Você pode nem saber o que fez, mas um site que pertence a você simplesmente aparecerá.

Em termos leigos, uma estrutura de blog é um conjunto de código-fonte escrito por terceiros. Você só precisa pegá-lo e poder usá-lo. Você pode alterar sua própria configuração e combiná-la com o tema desejado. Isso é suficiente (grande pessoal, por favor façam um desvio) . Então, a seguir vou compartilhar com vocês alguns frameworks que aprendi ao construir meu site pessoal, e analisá-los brevemente para você escolher.

Como diz o velho ditado, o público desta coluna são amigos que são novos nela, por isso não mencionarei alguns parâmetros complicados que não precisam ser conhecidos. Abordarei apenas as partes mais críticas, para que todos possam encontrar rapidamente aquele que lhes convém.

Deixe-me afirmar antecipadamente que a estrutura usada por Jason éHexo, você pode escolher diferentes de mim, mas as configurações não são as mesmas, as mesmas podem ser obtidas

Hexo (altamente recomendado)

Hexo é uma estrutura de blog rápida, simples e poderosa. Você escreve seu post em Markdown (ou outra linguagem de marcação) e o Hexo gera arquivos estáticos com lindos temas em segundos. >Clique aqui para ser direto<

Características hexo:

• Excelentes resultados operacionais e baixo custo
• Multiplataforma: local, nuvem, PC, terminal móvel tudo-em-um
• Suporta uma variedade de serviços CDN (habilitados para aumentar a velocidade de check-in de páginas da web)
• Os principais motores de busca têm maiores vantagens na inclusão e ponderação dos websites (os utilizadores têm maior probabilidade de encontrar o conteúdo que publica)

Se você gosta de configurar e completar certas configurações após operar o código, esta vai agradar ao seu gosto. Poste uma captura de tela de configuração para referência:

WordPress

WordPress é um sistema de gerenciamento de conteúdo (CMS) gratuito e de código aberto baseado em PHP e MySQL. É o software CMS mais utilizado no mundo. Começou como um simples sistema de blog e se desenvolveu em um sistema CMS totalmente funcional com milhares de plug-ins, widgets e temas. >Clique em mim diretamente<
Recursos do WordPress:

• Ampla gama de aplicações comerciais
• Conveniente para backup e transferência subsequentes, com suporte de ferramenta integrado
• Escalabilidade poderosa (pense aqui no shopping de plug-ins do Google)
• Muito fácil de usar para personalização (você definitivamente pode construir o que quiser)

Se não quiser ver esses códigos, você pode usar isto. O WordPress vem com gerenciamento de back-end. Escolha o tema desejado e arraste e solte os controles necessários (por exemplo, se quiser implementar a função do tempo de exibição, haverá uma versão móvel como É como um widget de desktop, basta arrastá-lo para onde deseja que seja exibido). O mais importante é que para usá-lo você precisa primeiro obter um servidor

Para que todos encontrem o caminho certo mais rapidamente, não vou lhe dar muitas opções, muito menos dizer o que mais existe (caso contrário você vai pensar que o que tenho agora pode não ser o melhor, e quero tentar mais . Se for esse o caso, você perderá muito tempo sem perceber. É melhor construí-lo primeiro com um e depois substituir os outros quando estiver familiarizado com ele.) Quando você começar de forma independente, você tenha uma ideia clara e não fique confuso. gastando muito tempo em um ponto

ambiente local

Quanto a isso, sem muita introdução, pode-se entender que precisamos de cimento, pás e outras ferramentas e matérias-primas para construir uma casa.O ambiente local é a pá e a ferramenta que usamos. A estrutura do blog da Hexo é feita de matéria-prima como cimento. Precisamos de ferramentas para começar a trabalhar, caso contrário você teria que fazer isso com as mãos ...

idiota

Descreva resumidamente para que é usado, veja aqui:

Git é um sistema de controle de versão distribuído de código aberto para manuseio ágil e eficiente de qualquer projeto, pequeno ou grande. É um software de controle de versão de código aberto desenvolvido por Linus Torvalds para ajudar a gerenciar o desenvolvimento do kernel Linux. O Git é diferente das ferramentas de controle de versão comumente usadas, como CVS e Subversion, pois usa uma biblioteca de versões distribuídas e não requer suporte de software do lado do servidor.

Ignore as palavras acima que você nunca ouviu antes, aqui vai. Você já usou um determinado disco de rede? Ele tem backup automático? Se você selecionar uma pasta local, quando o arquivo local for alterado, desde que o software esteja rodando em segundo plano, a nuvem será automaticamente consistente com o local? O processo é assim, mas a operação atual do git pode ser comparada a uma nuvem. Com alguns comandos, você pode "enviar/fazer backup" do código local para a nuvem.

Não discuti detalhadamente os recursos distribuídos, comandos, etc. do git . Recomendo que amigos que estão começando aqui possam > ler o tutorial aqui < para começar rapidamente.

Como queremos usar o Git, devemos primeiro instalar e configurar o ambiente Git, clique aqui para fazer o download (sistema operacional Windows) e clique no botão Download.

Não vou entrar em detalhes sobre o processo de instalação, basta usar a configuração padrão e clicar em “Avançar” para finalizar.

Em seguida, configuramos as informações da variável de ambiente. Para obter detalhes, consulte aqui . Depois de abrir a variável Path, adicione o diretório de instalação do ambiente local (certifique-se de que o local do arquivo atinja cmd).

Após a conclusão da instalação, você poderá não ver o atalho na área de trabalho, não se preocupe. Quando procuramos por Git na caixa de pesquisa do Windows, podemos ver vários ícones como este. Você

pode clicar diretamente em Git Bash ou clicar com o botão direito em qualquer lugar da área de trabalho para abrir Git Bash Here para usá-lo.

nó.js

>Baixar direto<

Muitos amigos ficam confusos entre essas duas versões. Depois de ler esta explicação, acredito que você saberá qual delas precisa. Jason usa a versão LTS .

LTS significa "Long Term Support" e Current significa "current".
Current significa a última versão lançada (uma vez a cada 6 meses), que pode ser uma versão ímpar ou par.

Hexo

Instalar

Clique com o botão direito na área de trabalho, abra git bash aqui e digite o comando para instalar (o local padrão é suficiente e a configuração subsequente não é recomendada)

npm install -g hexo-cli

Já instalei aqui. O display pode ser diferente do seu. Basta fechar a janela após a execução. Neste momento já existe um ambiente hexo localmente. Que tal, não é muito simples?

inicialização

Por conveniência, é recomendado criar um novo diretório diretamente em qualquer letra de unidade, exceto unidade C , e nomeá-lo de qualquer maneira. Por exemplo, criei uma nova pasta hexo-jason-blog na unidade D. Você pode consultá-la

Originalmente, eu queria usar o ambiente local que havia criado para demonstrar a todos, mas para refletir verdadeiramente o ambiente operacional de um "novato", Jason decidiu restabelecê-lo e reoperar passo a passo, apenas para que todos possam dar todos os passos até o sucesso.

Abra git bash aqui nesta pasta e digite o comando

hexo init

Você pode encontrar este erro neste momento. Não entre em pânico. Ele é causado pela rede ao clonar do GitHub

. Tente mais algumas vezes. Para soluções para esses problemas, consulte aqui<

Efeito bem-sucedido:

esses arquivos são adicionados ao diretório de arquivos raiz.

Vamos apresentar brevemente a estrutura de arquivos do hexo:

• público Todo o conteúdo da página web finalmente visto
• Plug-in node_modules e módulo node.js exigido pelo hexo
• _config.yml arquivo de configuração do site, definir algumas informações públicas, etc.
• informações do aplicativo package.json, configure o pacote js necessário para que o hexo seja executado
• pasta de modelos de andaimes, novos artigos conterão o conteúdo do modelo correspondente por padrão
• temas armazena arquivos de tema e hexo gera páginas da web estáticas baseadas em temas (muito rápido)
• source é usado para armazenar recursos do usuário (exceto para a pasta posts, outros arquivos nomeados com "+ nome do arquivo" são ignorados)

Nossas operações diárias de escrita estão todas em source/_post. Como já temos uma ferramenta para "misturar lama" na hora de construir uma casa - WebStorm, por que não usá-la?

Abra o diretório raiz hexo-jason-blog no WebStorm (basta arrastar o arquivo para o atalho do WebStorm na área de trabalho para abri-lo), abra o terminal e digite o comando

hexo s

Clique no link http://localhost:4000 (posição sublinhada em amarelo na imagem) para visualização local. O padrão é o tema paisagem integrado do hexo. O cursor

permanece na posição Terminal e a combinação de teclas Ctrl+ Cinterrompe a visualização local. Isso é o site local mais simples.

emmm, meus amigos também visualizaram com sucesso a página padrão. Provavelmente é assim. Ei:

Mas sempre sinto que algo está faltando. Sem algumas das coisas que um blog ou site deveria ter, como ele pode se tornar mais parecido com um site?

tema

Aqui apresentamos o tema e o framework . O Hexo que estamos usando agora é um framework de blog rápido e simples. O tema é um "acessório" desenvolvido por desenvolvedores baseado neste framework com funções mais completas, estilos de página e mais colunas. Assim como o celular que você usa, substitua-o por uma capa de celular, na hora de escolher uma capa de celular é preciso combinar com o modelo do seu celular, senão não vai combinar, certo?

Para dar outra "castanha", como os telefones Android (código fechado IOS, a menos que seja jailbroken), o tema padrão da área de trabalho produzido pelo fabricante. No aplicativo da loja de temas , você pode escolher ícones, planos de fundo e fontes mais bonitos de acordo com sua preferência. preferências. É como “colocar roupas novas”, nesta perspectiva podemos entender o que faremos a seguir.

estilo

Quando se trata de tópicos, definitivamente haverá muitos deles. Novamente, todos podem escolher de acordo com suas próprias preferências. Aqui está a biblioteca oficial de temas . Eu prefiro o tema Borboleta . Deixe-me dar um novo visual para o seu site.

Borboleta

Deixe-me primeiro mostrar a página do tema

Página inicial do blog

Página de postagem do blog

Pela documentação do tópico, pode-se observar que o autor o vem mantendo muito recentemente. Como diz o ditado, um bom produto deve ter uma boa documentação. O autor também é muito atencioso. Você pode acompanhar a documentação para configurá-lo passo a passo. É muito simples, basta formar uma cadeia de algumas ferramentas.

aplicativo

• Comando de entrada do terminal

git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

Aguarde a conclusão da instalação. Alguns arquivos do tema borboleta são exibidos na pasta de temas .

• Instalar plugin

Instale o renderizador pug e stylus. Se não estiver instalado, a interface de visualização é a seguinte.

Digite o comando no console, pressione Enter e aguarde a instalação.

npm install hexo-renderer-pug hexo-renderer-stylus --save

• Modificar arquivo de configuração

Encontre o arquivo **_config.yml no diretório raiz do site e mude o tema para borboleta** (observe o formato do arquivo yml )

• visualização local

hexo clean //执行此命令后继续下一条
hexo g //生成博客目录
hexo s //本地预览

As renderizações

ainda podem parecer tão "brutas", bom, esse problema envolverá o posterior "embelezamento do tema" (na verdade, apenas adiciona algumas fotos bonitas, o que também é muito simples). Meu blog não foi otimizado detalhadamente. É muito difícil e o tempo é limitado. Falarei sobre isso mais tarde. Você pode dar uma olhada e deixar um "pensamento". Acredito que você se sairá melhor do que eu.

meu blog

Lançado oficialmente

cama de imagem

Isso é coisa de mãe? ? ? Não entre em pânico, você não acha que nosso site com tema padrão não parece nada bom? Isso porque não há imagens. Não seria muito melhor se você o substituísse por um conjunto de imagens e o otimizasse? Quando nos referimos a imagens na Internet, uma forma é carregá-las localmente e colocar a referência do caminho no código; a outra forma é através da URL, obviamente esta última é mais conveniente (se comparada ao servidor que será utilizado posteriormente , à medida que a quantidade de fotos aumenta dia a dia À medida que o número aumenta, o espaço de armazenamento diminui gradativamente. Cada vez que você publica uma postagem, é necessário carregá-la junto com a foto. Quanto espaço ela ocupará?)

Porém, não seria ótimo se tivéssemos um lugar que pudesse converter fotos locais em links (todos podem acessar as fotos que você postou através deste link)? Picgo e alguns outros plugins podem fazer isso

Atualizei um artigo há algum tempo, usando GitHub e SM.MS. Se você tem amigos que não conseguem operar por analogia, >Olhe aqui< Como o GitHub é estrangeiro, a velocidade de acesso será um pouco lenta. SM.MS é uma marca antiga que já existe há muito tempo, mas ambos deles são ligeiramente mais lentos na velocidade de acesso.

Jason recomenda fortemente a nuvem de código doméstico (Gitee) para uso com Picgo . Estável, rápido e difícil de perder. (PS: Alguns amigos vão perguntar aqui. Tornei meu warehouse público e todas as minhas fotos estão nele. Há algum vazamento de privacidade ou algo assim?) Para esse tipo de pergunta, só posso dizer quem tem tempo livre todos os dias

. Você está bem e quer visitar seu armazém? ? Além disso, você pode enviar XXX fotos (de sua imaginação) para o armazém? ? Então, fique à vontade para usá-lo e não pense que é muito picante.

Além disso, um lembrete amigável: a capacidade máxima de armazenamento da conta da versão gratuita do Gitee é 5G. Se o armazém estiver cheio, lembre-se de alterar o caminho do software. Após o uso, não altere o nome da sua conta Gitee (nem o apelido, o nome em inglês), caso contrário você esperará pelo 404 Bar

Configuração borboleta

Coloque a documentação oficial diretamente , os amigos podem configurá-la primeiro, é muito simples. A página que você vê pode estar em chinês tradicional. Não use o mecanismo de tradução que vem com o navegador (parte do conteúdo pode não ser exibida após a tradução). O atencioso autor já pensou nisso. Só precisamos alterá-lo as configurações no canto inferior direito do site

. Sen publicará uma edição especial mais tarde para falar sobre alguns problemas na configuração do tema. Acredito que os amigos que virem isso mal podem esperar para postar seus sites online. Vamos nos concentrar nesta questão .

Configuração de páginas do GitHub

GitHub Pages são páginas da web criadas diretamente de repositórios/projetos no GitHub . O gerenciamento é simples. Edite o conteúdo no armazém localmente e carregue-o no GitHub. As páginas do GitHub podem concluir rapidamente a atualização. O ponto principal é que não custa dinheiro, não custa dinheiro, não custa dinheiro. Crie um novo

armazém e preencha o conteúdo da seguinte forma. Preste atenção especial à

garantia de posição da caixa vermelha. Armazém público , preencha o nome correto username.github.io , o sistema muda automaticamente para Páginas

Encontre páginas nas configurações do armazém

e lembre-se do endereço do armazém. Faremos upload dos arquivos locais para o armazém. Se você estiver usando o git

pela primeira vez no seu computador , configure a chave pública SSH (um protocolo de segurança, você pode entendê-lo como fazer login em um determinado computador).Código de verificação exigido pelo site)

Conecte-se ao controle remoto no WebStorm e adicione o endereço do armazém. Este não é o armazém necessário para publicar o site (não o "nome de usuário" + armazém github.io, crie um novo para gerenciar o código local)

porque esses são comandos básicos do git , que também foram mencionados anteriormente. Já estive aqui antes. Se você não sabe, pode ler as informações nesta coluna. Todas são operações básicas e muito fáceis de começar.

Modifique as configurações de implantação do site. Abra git bash aqui

no diretório raiz local do site e execute os seguintes comandos em sequência.

hexo clean //执行此命令后继续下一条
hexo g //生成博客目录
hexo s //本地预览
hexo d //部署项目

Após a conclusão da execução, todos poderão acessar seu site através de seu nome de usuário + nome de domínio github.io . Neste ponto, lançamos com sucesso nosso site

Se você acha que a velocidade de acesso do GitHub é lenta (bem, na verdade é lenta e às vezes não pode ser aberta), você pode implantá-lo no Gitee . As operações são as mesmas e ainda estão em chinês. Não faça isso. ser muito simples. ei

Bem, o lançamento foi realmente lançado. Você acha que um nome como nome de usuário + github.io é mais fácil de lembrar? ? Acho que se você é um novato ( um usuário que talvez nem saiba o que é GitHub ), com certeza será muito difícil.

Então, como torná-lo fácil de lembrar e personalizado o suficiente?

Claro, esta parte definitivamente não é gratuita. Como pode haver alguma razão para obter tudo de graça? Certo, é recomendável realizar as seguintes operações no Alibaba Cloud ou Tencent Cloud . Se você usa outras plataformas, não é impossível, mas é recomendável adquirir nomes de domínio e servidores na mesma plataforma para facilitar o gerenciamento.

Os principais fabricantes nacionais têm garantias, então você não precisa se preocupar com isso. Do ponto de vista econômico, escolha aquele que tenha atividades e seja mais acessível. Jason viu que as atividades do Alibaba Cloud naquela época eram mais acessíveis do que o Tencent Cloud , então ~~

Guia de compra de servidor

Recebi reações de alguns amigos: São tantas entradas, mas não encontro onde comprá-las/não encontro a entrada para o evento. Veja como conferir as últimas atividades, quais descontos a plataforma oferece e onde encontrar a entrada

Ali Nuvem

Exclusivo para estudantes

Conclua a certificação do aluno na central de contas para adquirir mais descontos

Exclusivo para eventos

Últimas atividades >Clique em mim para ser direto<

Nuvem Tencent

Devo dizer que as interfaces dos dois são basicamente as mesmas, você só precisa estar familiarizado com um, então os locais são quase os mesmos.

Exclusivo para estudantes

Para festas de estudantes, confira aqui >Clique em mim para ser direto<

Exclusivo para eventos

Últimas atividades >Clique em mim para ser direto<

nome do domínio

Nome de domínio (inglês: Domain Name), também conhecido como domínio, é o nome de um computador ou grupo de computadores na Internet que consiste em uma sequência de nomes separados por pontos. É usado para localizar o computador durante a transmissão de dados (às vezes também Refere-se à localização geográfica)
Como os endereços IP são inconvenientes de lembrar e não podem exibir o nome e a natureza da organização do endereço, as pessoas projetaram nomes de domínio e mapearam nomes de domínio e endereços IP entre si por meio do Sistema de Nomes de Domínio (DNS, Sistema de Nomes de Domínio ). , permitindo que as pessoas acessem a Internet de maneira mais conveniente, sem precisar se lembrar de uma sequência de endereços IP que podem ser lidos diretamente pelas máquinas.

Se você não entende, não importa, então ouça Jason em detalhes. Simplificando, os recursos acessados ​​na rede pública possuem seus endereços IP fixos , mas se você quiser acessar um IP específico , é preciso lembrar dele. No entanto, não é conveniente lembrar, então as pessoas criaram nomes de domínio .

Dê um nome personalizado ao IP . Por exemplo, o nome completo é "Jason the Siege Lion". Meus amigos me chamam de Sensen, Asen e Xiaosen. Eles são todos pseudônimos, mas todos apontam para a pessoa "Jason the Siege Lion". " Então, como implementar o alias na rede? Aqui está uma introdução ao DNS , que é um serviço na Internet que mapeia nomes de domínio e IPs reais entre si, ou seja, o que você insere no nome de domínio para acessar é o endereço IP correspondente ao nome de domínio.

Comprar

Agora que entendemos o que é um nome de domínio , vamos primeiro comprar um nome de domínio!
>Clique aqui< para consultar o nome de domínio desejado

Por exemplo, você pode pesquisar depois de inserir as informações, adicioná-las à lista após selecioná-las e depois pagar para comprar. Sufixos diferentes têm preços diferentes, depende da preferência pessoal

O sufixo do nome de domínio, também conhecido como nome de domínio de nível superior, refere-se ao símbolo que representa um tipo de nome de domínio. Nomes de domínio com sufixos diferentes têm significados diferentes. Os nomes de domínio são divididos em duas categorias: nomes de domínio específicos de cada país (ccTLD), como .cn na China, .us nos Estados Unidos, .ru na Rússia e nomes de domínio internacionais gerais (gTLD), como .com, .xyz, .top, .wang Existem mais de 1.000 tipos, como , pub, .xin, .net, etc. Todos os sufixos de nomes de domínio têm a mesma função, apenas a aparência e o significado são diferentes. No entanto, apenas alguns sufixos de domínio sufixos de nomes como os dos exemplos podem apoiar o registro de sites na China.

Para obter mais informações sobre sufixos de nomes de domínio, veja aqui

Resolução DNS

Adicionar nome de domínio

Como agora temos um site como username.github.io , para torná-lo simples e fácil de lembrar, "resolvemos" "username.github.io" para o nome de domínio adquirido, para que o site tenha todos os nomes de domínio e nomes de usuário. github.io tem dois URLs

Abra o armazém, encontre as configurações, insira as configurações da página, adicione um nome de domínio.

Você também pode usar HTTPS forçado gratuito.

HTTPS (nome completo: Hyper Text Transfer Protocol over SecureSocket Layer) é um canal HTTP voltado para a segurança. Baseado em HTTP, garante a segurança do processo de transmissão por meio de criptografia de transmissão e autenticação de identidade. HTTPS adiciona SSL e HTTPS com base em HTTP
A base de segurança é SSL [SSL (Secure Sockets Layer) e seu sucessor Transport Layer Security (TLS)) é um protocolo de segurança que fornece segurança e integridade de dados para comunicações de rede. TLS e SSL criptografam a conexão de rede entre a camada de transporte e a camada de aplicação],
portanto, os detalhes da criptografia exigem SSL. HTTPS tem uma porta padrão diferente do HTTP e uma camada de criptografia/autenticação (entre HTTP e TCP). Este sistema fornece métodos de autenticação e comunicação criptografada. É amplamente utilizado para comunicações sensíveis à segurança na World Wide Web, como pagamentos de transações, etc.

Ative esta opção

Adicionar registro de análise

Digite o console de nome de domínio no site oficial do Alibaba Cloud

. Caso contrário, pesquise aqui

para encontrar o nome de domínio que precisa ser vinculado a username.github.io. Clique em "Resolver"

para entrar e clique em "Adicionar registro". Você precisa para adicionar dois registros.

A primeira

e a segunda vez

a resolução de DNS leva tempo. Depois de um tempo, se você inserir seu nome de domínio na caixa de navegação, a resolução será bem-sucedida para acesso normal.

Por que se diz que está oficialmente online? Afinal, o site só pode ser visualizado no servidor, então é mais formal, certo? Assim como o GitHub Pages , é gratuito, mas na China leva tempo após a resolução do DNS, e sempre haverá sites inacessíveis ou desconectados. A situação é muito inconveniente

servidor

Vamos dar uma olhada primeiro, quem é o servidor ?

Um servidor é um tipo de computador que funciona mais rápido, carrega uma carga maior e é mais caro que um computador normal. O servidor fornece serviços de computação ou aplicativos para outros clientes na rede (como PCs, smartphones, terminais como caixas eletrônicos e até mesmo equipamentos de grande porte, como sistemas ferroviários). O servidor possui recursos de computação de CPU de alta velocidade, operação confiável de longo prazo, forte capacidade de transferência de dados externos de E/S e melhor escalabilidade.De
acordo com os serviços fornecidos pelo servidor, em geral, o servidor tem a capacidade de responder ao serviço solicitações, realizar serviços, A capacidade de garantir serviços. Por ser um dispositivo eletrônico, a estrutura interna de um servidor é muito complexa, mas não difere muito da estrutura interna de um computador comum, como: CPU, disco rígido, memória, sistema, barramento de sistema, etc.

Entendimento simples: um tema sem fonte de alimentação e espaço está sempre atendendo aos recursos que você coloca (implanta) no "céu (nuvem)" e pode lidar com diversas solicitações (por exemplo, se você inserir um nome de domínio na barra de navegação para acessar o site)

Existem dois tipos de servidores, nacionais e estrangeiros.De acordo com as leis do nosso país, os sites da China continental precisam ser registrados e o tempo de espera pode ser um pouco maior. Os países estrangeiros não precisam se registrar, mas a estabilidade e a velocidade de acesso não podem ser garantidas. Você pode julgar por si mesmo. Jason usa um blog pessoal implantado pelo servidor de aplicativos leves do Alibaba Cloud.

Comprar

Esta é a configuração do meu servidor, você pode consultá-la.

Se você é iniciante, esta configuração básica é suficiente para uma máquina de estudante e pode ser obtida gratuitamente. Para regras detalhadas, consulte a comunidade > Clique em mim para ir diretamente <

Desenvolvedor-> Plano de Crescimento

Exclusivo para estudantes (depois de experimentar, você pode ganhar meio mês de servidor ECS grátis, e se postar sua experiência na comunidade (postar um blog), você pode renovar por dois meses grátis), por regras específicas, verifique o centro de contas do site oficial->

localização de informações básicas Certificação completa do aluno

Os descontos na compra no último local do evento serão ainda maiores

implantar

Configuração de senha

Altere a senha da conexão remota no local mostrado na figura e salve-a.

Embora você possa usar um navegador para se conectar remotamente , não é recomendado porque alguns atalhos de teclado serão confundidos pelo sistema como operações no navegador em vez de uma caixa de diálogo .

conexão remota

Para evitar tais problemas, optamos por utilizar a ferramenta de terceiros Putty.As etapas específicas da operação estão muito detalhadas no documento de ajuda do Alibaba Cloud e não serão repetidas aqui.

Comece aqui e siga as instruções para concluir a operação

Inicie a ferramenta Putty , conecte-se ao servidor, o nome de usuário de login é root e a senha é a senha definida no local do servidor (a senha inserida no sistema operacional Linux não é exibida por segurança, então não se preocupe). Quando a interface a seguir aparecer, significa que a configuração está normal e você pode continuar para a próxima etapa.

configuração git

1. Digite o comando para instalar o git

yum install git

Se estiver pausado durante o processo, digite sim / y / Y de acordo com os prompts para continuar a instalação. Quando concluído aparecer no final, a instalação foi bem-sucedida. 2.

Crie uma conta git

adduser git

3. Adicione permissões de conta git

chmod 740 /etc/sudoers
vim /etc/sudoers

4. Após executar o último comando, clique na itecla do teclado para entrar no modo de edição, encontre o código de localização mostrado no ícone e

adicione uma linha abaixo

git     ALL=(ALL)     ALL

Pressione Esca tecla e entre:qq(Significado: Sair após salvar)

5. Altere as permissões de volta

chmod 400 /etc/sudoers

6. Defina a senha da conta git

sudo passwd git

Digite o comando e pressione Enter. Digite a senha duas vezes seguidas (não exibida, normal). Quando o ícone aparecer, foi bem-sucedido.

7. Mude para a conta git

su git

Crie arquivos ~/.ssh e ~/.ssh/authorized_keys

mkdir ~/.ssh
vim ~/.ssh/authorized_keys

Clique na itecla do teclado para entrar no modo de edição e cole a chave pública SSH gerada pelo computador local . O local do arquivo é mostrado na figura

. Após colar, pressione Esca tecla e digite:qq(Significado: Sair após salvar)

Conceder permissões

chmod 600 /home/git/.ssh/authorized_keys
chmod 700 /home/git/.ssh

8. Teste se o login sem senha foi bem-sucedido no git bash local aqui

ssh -v git@服务器公网IP

O conteúdo do ícone aparece indicando que a conexão foi bem-sucedida

9. Crie um warehouse no servidor e conclua a configuração.
Mude para a conta root

sudo su root

Criar diretório de armazém de repositório

mkdir /www/repo

Conceder permissões

	
chown -R git:git /www/repo
chmod -R 755 /www/repo

Crie o diretório raiz do site hexo

mkdir /www/hexo

Conceder permissões

chown -R git:git /www/hexo
chmod -R 755 /www/hexo

Crie um novo repositório git em branco e inicialize-o

cd /www/repo
git init --bare hexo.git

10. Crie ganchos Git para implantação automática

vim /www/repo/hexo.git/hooks/post-receive

Igual ao acima, entre no modo de edição, cole o código a seguir, salve e saia

#!/bin/bash
git --work-tree=/www/hexo --git-dir=/www/repo/hexo.git checkout -f

Modificar permissões

chown -R git:git /www/repo/hexo.git/hooks/post-receive
chmod +x /www/repo/hexo.git/hooks/post-receive

Armazém estabelecido

Instale o nginx

Nginx é um servidor web leve/servidor proxy reverso e servidor proxy de e-mail (IMAP/POP3), lançado sob o protocolo semelhante ao BSD. Suas características são que ele ocupa menos memória e possui fortes recursos de simultaneidade. Na verdade, os recursos de simultaneidade do nginx funcionam melhor entre servidores web do mesmo tipo. Nginx (motor x)
é um servidor web HTTP e proxy reverso de alto desempenho e também fornece O serviço IMAP /POP3/SMTP, que libera código-fonte sob uma licença semelhante ao BSD, é conhecido por sua estabilidade, rico conjunto de recursos, arquivos de configuração simples e baixo consumo de recursos do sistema.

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

Digite y na metade para continuar a instalação (igual ao acima) e aguarde a conclusão da instalação. O URL de login e a senha inicial serão exibidos. Preste atenção na posição da

caixa vermelha. Se ambos os URLs estiverem inacessíveis, abra a porta 8888 no grupo de segurança do servidor/firewall e

digite a conta inicial. Faça login com seu nome e senha.

Após entrar, procure por Nginx e clique para instalar (já instalei aqui)

Site->Adicionar site, o nome de domínio é xxx .com sem qualquer prefixo

. Configurações->Arquivo de configuração, modifique o conteúdo na caixa vermelha

Configurações->Diretório do site, modifique para/www/hexoE salve

o terminal do servidor e reinicie o serviço

service bt restart

Neste ponto, a configuração do lado do servidor está concluída

Modificação de configuração hexo

Insira o diretório raiz do blog local e modifique o local de implantação do arquivo _config.yml

O código-fonte das configurações do servidor de configurações do GitHub Pages

é o seguinte

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy: 
  type: git
  repo: git@你的域名:/www/repo/hexo.git
  branch: master # 注意此处分支设定,需在仓库中选择默认的分支

Abra a ferramenta Putty , conecte-se ao servidor e conceda permissões

chown -R git:git /www/repo/
chown -R git:git /www/hexo/

Abra o git bash aqui no diretório raiz local e execute o comando

hexo clean //清除缓存
hexo d -g //快速部署

O conteúdo do ícone aparece indicando que a implantação foi bem-sucedida. Após a conclusão do registro, você poderá acessá-lo através do nome de domínio.

Arquivamento

O site de Jason foi registrado recentemente, então se você não pode esperar, basta encontrar outro caminho. Na China, não nos atrevemos a cometer erros. Você passará pelas seguintes etapas
após

adquirir o servidor e vincular o nome de domínio ao o sistema. Você será avisado de que não há registro, basta seguir as instruções para concluí-lo.

PIC

Nome completo em inglês: Internet Content Provider, nome completo em chinês: Internet Content Provider
ICP pode ser entendido como uma operadora de telecomunicações que fornece serviços de informação da Internet e serviços de valor agregado aos usuários. É uma empresa ou departamento operacional formal aprovado pela autoridade nacional competente .

Arquivamento on-line

Entre no site oficial.Depois que o Alibaba Cloud concluir o registro do ICP , o sistema também solicitará que você opere.

Após a conclusão da implantação, selecione Registro on-line para

fazer login. Envie as informações do proprietário do site e alguns materiais básicos para revisão e aprovação. Por fim, insira o código na parte inferior da página da Web. O efeito é mostrado na figura.

---

Neste ponto, seu site pessoal está online com sucesso e implantado no servidor. O conteúdo será atualizado continuamente com base no seu feedback! ! !

Por fim, coloque o endereço do pequeno site do Jason, seja bem vindo a visitar haha ​​>>> pequeno site do Jason

---

Referências

Como construir um site para um iniciante técnico

Picgo+Gitee constrói uma cama pessoal gratuita